前言Vue中的组件通信是必不可少的使用场景。在回顾了平时使用Vue中遇到的一些业务场景以及对应的组件通信方式后，做一个简单的分类总结，大致有以下几种通信方式：props/$emit定义了最常用的父子组件通信方式，父组件通过props给子组件传值，子组件触发事件传值通过$emit事件传递给父组件示例描述//parentComponent//Subcomponentprops:{name:{type:String,default:''}}methods:{xxx(){this.$emit('updateFromChild',xx)}}$attrs和\$listeners$attrs：定义子组件获取父组件传递的属性值，而不是定义在props(class和style除外)实例描述//父组件//子组件需要用在grandchildrencomponents父组件中有很多属性，但是父组件不需要用到很多，只是作为一个中转传递，巧妙的使用$attrs可以保存写在父组件中的props值.//父组件//子组件props:{name:{type:String,default:''}}$listener:定义包括父作用域中的v（没有.native修饰符）-on事件听众。实例说明//父组件//子组件在场景子组件中使用调用父组件的方法provide和injectprovide：是一个对象或者一个返回对象的函数。该对象包含可以注入其子孙对象的属性。inject：是一个数组或对象，包含注入到祖先组件中的属性。Description://父组件://子组件可以看到在挂载的子组件中打印出了inject中传入的name属性，并且sayName方法执行成功。而且name属性的值还是'Xiaoming'，并没有变成'Xiaohua'，没有响应。请注意，provide和inject成对出现。使用provide注入属性，组件下的所有子孙组件都可以获取到provide并在inject中注入。绑定是非响应式的，这是与props$parent和\$children的定义的本质区别：在创建的实例的父实例和子实例中，子实例可以使用this.\$parent来访问父实例，并将子实例压入到父实例的\$children数组中，父实例可以通过this.$children访问子实例。实例说明//父组件mounted(){console.log(this.$children)//可以操作子组件的数据，或者调用其方法中的方法}//子组件mounted(){console.log(this.$parent)//可以获取父组件中的属性和方法}注意\$children和$parent不是响应式的Vue官方有说明要谨慎使用\$parent和$children——他们的主要目的是为了访问组件应急方法。$refs定义了一个对象，该对象包含所有使用ref属性注册的DOM元素和组件实例。你可以通过this.$refs.xxx获取xxx子组件中的数据和方法。示例说明//父组件mounted(){this.$refs.child.sayHello()//hello}//子组件方法：{sayHello(){console.log('hello')}}注意this.$refs.xxx只能在xxx组件渲染完成后才能获取到，并不是所有的生命周期都可以获取到。通过this.$refs.xxx对子组件的属性操作是无响应的，所以避免在computed中使用。这是一个很好的应急方法，常用于下面两种父组件直接调用子组件中的方法的场景，省去不必要的代码重写替换JQuery或JS原生方法获取dom元素Vuex就不多说了，一个强大的复杂的单页面全局数据通信管理中心，为页面中的每个组件操作全局数据并响应每个组件。不知道的请自行搜索。这里有两个简单的要注意的点。注意vuex的使用场景，不要滥用，复杂的页面数据管理，如果只是简单的数据通信，就用props和$emit，不要拿来用，合适的才是最好的在vuex中，sub-可以根据情况进行模块管理，进一步提高代码的可维护性。eventBus定义对于非父子组件，可以使用一个中间媒介作为中央事件总线，完成事件的触发和监听，传递价值。实例说明第一步：创建事件总线：创建一个eventBus.js文件//只是为了创建一个vue实例importVuefrom'vue'exportdefaultnewVue()第二步：在源组件中引入事件，传值Bus,用于事件触发和值传递{methods:{emitEvent:funciton(){eventBus.$emit('sendVal',param)}}}第三步：在传值目标组件中引入事件总线，监听监听事件按值接收总结如下：1、创建事件总线，如demo中的eventBus，作为通信桥梁2.使用bus.$emit触发一个组件中需要传值的自定义事件，并传递参数3.使用bus.$on监听组件中需要接收数据的自定义事件，并处理回调函数中传入的参数注意点eventBus是特别适用于不跨层级的组件间通信，解决了props层层传递的繁琐，避免了使用vuex的相对臃肿。缺点是如果没有解释和规范管理，很容易找到事件的触发者和监听者。因此，建议在单独的js文件中创建一个eventBus的vue实例，并在该文件中注解事件的触发组件和监听组件。
