今天学习了,vue组件通信本篇随笔主要对今天的学习成果进行总结。有什么不对的地方还望谅解!
首先,Vue的核心即组件化开发,所以组件通信就显得十分重要。
组件通讯包括:父子组件间的通信和兄弟组件间的通信。
1.子组件获取父组件中数据间:
var Child={
template:"#child",
props:[‘mes‘],
data:function(){
return {
data:this.$props.mes, //调用该子组件 props 中的对应属性的属性值;
}
}
通过props将所需该子组件的属性名进行保存,vue自动将其连同属性值打包成json格式保存在 this.$props 中。
那么当子组件以标签形式插入父组件模板时,子组件即可通过 v-bind 绑定属性的形式获取父组件中的数据。
2.父组件获取子组件中数据:
通过 ref 绑定子组件名,子组件的数据将会被保存在 this.$refs 中,所以在父组件中通过 this.$refs.Child 获取Child组件中的数据。
3.用户操作触发,子组件获取父组件数据:
var Head={
template:"#child",
data:{
meg:"hello!"
},
methods:{
fn:function(){
this.$emit(‘event‘,this.meg) //触发自定义事件 传递数据
}
}
}
通过子组件中的button按钮触发自定义事件 event 从而传递child中的meg数据;
在父组件的标签中加入自定义事件 event 来接收参数
methods:{
result:function(res){
this.mes=res;
}
},
事件event触发后,执行父组件中的result方法,形参即为接受到的子组件中数据。Vue 组件通信
原文:https://www.cnblogs.com/mengeer/p/9363300.html