Vue 组件通信

Posted 2020-12-25 mengeer

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