在下面的例子中，Vue实例对象即为父组件，注册的全局组件为子组件。
一. 父组件向子组件传递数据
1. 方法步骤
- (1) 用props属性给组件声明一个自定义属性(名称可以自定义 如下例子中的 tit list);
- (2) 在父组件中调用子组件时，通过上一步声明的自定义属性来传递参数。
2. 实例
实现：将父组件中的数据(titleArr 和 contList)传到子组件的相应位置中
运用：props， 全局组件(可用别法)
过程：父组件数据 --> html自定义属性绑定--> 子组件自定义属性--> 子组件相应位置-->v-for循环入值
html：
<div class="test">
<!--tit list-->
<tab :tit="titleArr" :list="contList"></tab>
</div>
javascript：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
//全局组件
Vue.component("tab",{
//tit list --- 自定义属性
props:["tit","list"],
template:`<div :style="objhead">
<div :style="clearFloat" >
//tit
<div :style="hContent" v-for="val in tit">{{val}}</div>
</div>
<ul >
//list
<li :style="clearFloat" v-for="val in list">
<div :style="hContent">{{val.name}}</div>
<div :style="hContent">{{val.price}}</div>
<div :style="hContent">{{val.num}}</div>
</li>
</ul>
</div>`,
data:function(){
return {
objhead:{
width:"600px",
background:"#eee",
},
hContent:{
float:"left",
width:"33.33%",
lineHeight:"35px",
textAlign:"center",
border:"1px solid #666",
},
clearFloat:{
overflow:"hidden"
}
}
}
})
var vmTest = new Vue({
el:".test",
data:{
titleArr:["商品名称","价格","数量"],
contList:[
{name:"青菜",price:12,num:4}
]
}
})
</script>
css
*{margin: 0;padding: 0;list-style: none;box-sizing: border-box;}
可以自定义
二. 子组件向父组件传递数据
1. 方法步骤
- (1) 在子组件中定义一个事件；
- (2) 在子组件定义的事件中通过$emit方法传递数据（且定义一个事件名称用于html中）；
- (3) 在父组件中注册一个 通过(第三步)$emit定义的事件；
- (4) 通过父组件中注册的事件获取到数据。
2. 实例
实现：将子组件li的index传递到父组件中
运用：$emit ， 局部组件(可用别法)
html：
<div id="app">
<!--toparent---子组件中通过$emit定义的事件-->
<test @toparent="getson"></test>
</div>
js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
//局部组件
var test = {
template:`
<div>
<ul>
<li @click="getIndex(index) v-for="(val,index) in list">{{val}}</li>
<ul>
</div>
`,
data:function(){
return {
list:["html","css","js"]
}
},
methods:{
getIndex(index){
console.log({index});
//重点***这里的第一个参数即是html里的事件,第二个参数（被传递的即是传递给父组件的数据res）也可以是个数组。
this.$emit("toparent",[index,this.list]);
}
}
}
var vm = new Vue({
el:"#app",
components:{
//实例化局部组件
test
},
methods:{
getson(res){
//接受到子组件的数据
console.log({res})
}
}
})
</script>
* 注意坑点：
html中不区别大小写，而javascript区别大小写，为了防止出错，统一小写。
组件模板只能有一个根节点！！！
网友评论