<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="box">
<ul>
<!--标签语义话-->
<li is="veb" v-for="item in list" :item=item ></li>
</ul>
</div>
</body>
<script>
//商品信息,父子通信中父到子的传递
Vue.component("veb",{
props:["item"],
//:后的是变量名，双引号必须要有,这个item只能在这个template中使用,相当与是data中的数据
template:"<li><h1>{{item.name}}</h1><p>{{item.price}}</p></li>",
})
var box=new Vue({
el:"#box",
data:{
list:[
{
name:"苹果",
price:"10块一斤"
},
{
name:"香蕉",
price:"14块一斤"
},
{
name:"西瓜",
price:"12块一斤"
},
]
}
})
</script>
</html>
vue父子通信
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 1.父组件传递数据给子组件 父组件数据如何传递给子组件呢？可以通过props属性来实现父组件：//这里必须要用 -...
- 一提到两个非父子组件通信方法，有经验的 coder 肯定会说用 Vuex 啊，我个人建议不要为了用 Vuex 而用...
- vue.js父子组件通信：1，父组件向子组件传递数据，通过props，注意数据绑定是单向的(借鉴了react);2...
