Vue 组件通信

今天学习了，vue组件通信本篇随笔主要对今天的学习成果进行总结。有什么不对的地方还望谅解！

首先，Vue的核心即组件化开发，所以组件通信就显得十分重要。

组件通讯包括：父子组件间的通信和兄弟组件间的通信。

1.子组件获取父组件中数据间：

var Child={

template:"#child",

props:['mes'],

data:function(){

return {

data:this.$props.mes,//调用该子组件 props 中的对应属性的属性值；

} }

通过props将所需该子组件的属性名进行保存，vue自动将其连同属性值打包成json格式保存在 this.$props 中。

那么当子组件以标签形式插入父组件模板时，子组件即可通过 v-bind 绑定属性的形式获取父组件中的数据。

//data 即为父组件中的数据，在子组件中通过 this.$props.mes 即可获取其值；

2.父组件获取子组件中数据：

通过 ref 绑定子组件名，子组件的数据将会被保存在 this.$refs 中,所以在父组件中通过 this.$refs.Child 获取Child组件中的数据。

3.用户操作触发，子组件获取父组件数据：

click

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方法，形参即为接受到的子组件中数据。