vue父子组件间的通信
2017-07-31 本文已影响0人
tobyDing
父子组件定义与使用：
<body>
<div id="box">
<aaa></aaa>
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg:'我是父组件的数据'
}
},
template:'<h2>我是aaa组件</h2><bbb></bbb>',
components:{
'bbb':{
template:'<h3>我是bbb组件->{{msg}}</h3>'
}
}
}
}
});
</script>
</body>
组件间数据传递/通信:
vue默认情况下，子组件也没法访问父组件数据
（1）子组件想获取父组件data数据
在调用子组件时候，通过属性传递数据：(注意此时属性名属于html,命名时加横线，不要大写)
<bbb :m="数据"></bbb>
在子组件之内，通过props获取属性中的数据: (注意此时属性名属于js,命名时采用驼峰命名法，包括模板中引用数据时也采用驼峰命名)
a) 常见的数组写法
props:['m','myMsg']
b) json写法
props:{
'm':String,
'myMsg':Number
}
（2）父级获取子级数据
a）常用方式
*需要子组件把自己的数据，发送到父级：
vm.$emit(事件名,数据);
父级接受：
@事件名 通过一个带参数的函数接收数据(注意，接受的函数不能加（）,会使默认参数清空)
b）vue2.0已经废除的方式
vm.$dispatch(事件名,数据) 子级向父级发送数据
vm.$broadcast(事件名,数据) 父级向子级广播数据
配合: events:{}
