本文章分享我在做vue项目中遇到的父子组件之间通信和数据传递的问题。
在vue2.0中，已经废弃了 $dispatch 和 broadcast ,推荐使用Vuex。
但是平时做一些简单的组件可以使用简单的数据通信工具。
父子组件传递数据：
1、父组件向子组件传递:
父组件：
<template> <div> <input type="text" v-model="msg"> <br> //将子控件属性sendMsg与父组件msg属性绑定，通过sengMsg传送 <child :sendMsg="msg"></child> </div> </template> <script> export default{ data(){ return { msg: '我的父组件' } }, components: { child: require('./Child.vue') } } </script>子组件：
<template> <div> <p>{{sendMsg}}</p> </div> </template> <style> </style> <script> export default{ props: { sendMsg: String } } </script>2、子组件向父组件传递数据：
父组件：
<template> <div> <!-- message为父子组件通信的通道；recieveMessage为父组件监听到后的方法 --> <child2 @message="recieveMessage"></child2> </div> </template> <script> import {Toast} from 'mint-ui' export default{ components: { child2: require('./Child2.vue'), }, methods: { recieveMessage: function (el) { cosole.log(el); //打印出原生的div元素 } } } </script>子组件：
<template> <div class='onput' @click='addEvent'></div> </template> <script> export default{ methods: { addEvent(event) { this.$emit('message', event.target); //获取div的原生DOM元素 //这里的message实际上对应了父组件中的message，两者一致才可以交互数据。 } } } </script>有一点值得注意：如何在子组件和子组件之间传递数据？这里我想到可以借助父组件这个跳板，把从A子组件获取的数据写入自己的data中，然后传给B子组件。
父组件的recieveMessage中将获取的数据写入data data() { el: {} }, methods: { recieveMessage: function (el) { this.el = el; } }再传递给子组件B。
vue2.0还有一个值得关注的问题，组件之间如何通信？官网提供了一种方法：
// 将在各处使用该事件中心 // 组件通过它来通信 //在一个单独的文件里写入下面内容，命名为eventHub.js improt vue from 'vue'; export default { bus: new Vue() }在子组件中引用：
import eventHub form 'eventHub.js';然后是数据传递和通信的同时实现：
父组件：
<template> <div> //message为父子组件通信的通道；recieveMessage为父组件监听到后的方法 <child2 @message="recieveMessage"></child2> <child3 ref="child3"></child3> </div> </template> <script> export default{ data() { el: {} }, components: { child2: require('./Child2.vue'), child3: require('./Child3.vue'), }, methods: { recieveMessage: function (el) { this.$refs.child3.drop(el); //在父组件上调用子组件3的drop方法。 } } } </script>子组件2：
<template> <div class='onput' @click='addEvent'></div> </template> <script> export default{ methods: { addEvent(event) { this.$emit('message', event.target); //获取div的原生DOM元素 //这里的message实际上对应了父组件中的message，两者一致才可以交互数据。 eventHub.bus.$emit('add', event.target);//组件之间通信 } } } </script>子组件3：
<template> <div>{{el}}</div> </template> <script> export default{ methods: { drop(el) { console.log(el); //打印出子组件2的div元素。 } } } } </script>至此，完成了父子组件之间的通信和数据交互联合使用，非常简单实用。
程序员青戈 认证博客专家 Java 架构 博客专家 Java程序员，5年一线大厂实战经验。关注我的原创微信公众号「Java学习指南」，回复「面试」可获取大厂通关面试题解一套。