Vue组件常用的六种通信方式

Vue.js 组件实例的作用域是相互独立的，不同组件之间的数据不能互相访问，组件有父级组件、子级组件、兄弟组件，如何选择组件之间的通信方式？针对常用的 props、$emit/$on、vuex、$parent/$children、$attrs/$listeners、provide/inject 进行讲解，对比各自的区别以及使用场景。

1. props

子组件使用props 接收父组件传递的值，子组件通过 $emit ，让父组件接收事件，改变父组件的data里面的值；

代码示例：

1. <!--父组件-->
   <template>
       <title :title='title' @change='changeHandle'></title>
   </template>
   <script>
   export default {
       data() {
           return {
               title: '123'
           };
       },
       components: {
           title
       },
       methods: {
           changeHandle(val) {
               this.title = val;
           }
       }
   }
   </script>
   
   <!--子组件-->
   <template>
       <div @click='changeHandle'>{
       {title}}</div>
   </template>
   <script>
   export default {
       props: {
           title: String
       },
       methods: {
           changeHandle() {
               this.$emit('change', '456');
           }
       }
   }
   </script>

    

子组件通过事件向父组件传递值，父组件更改自己的数据，子组件接收更改后的值；

2. $emit/$on

通过Vue 的实例触发事件和监听事件，实现了跨级组件的通信；

代码示例：

1. <!--在Vue的原型链上添加$bus 属性，赋值为Vue实例-->
   const EventBus = new Vue();
   Object.defineProperties(Vue.prototype, {
       $bus: {
           get() {
               return EventBus;
           }
       }
   });
   window.globalVue = EventBus;
   
   <!--使用-->
   // 组件A
   <template>
       <div @click='changeHandle'>触发事件</div>
   </template>
   <script>
   export default {
       methods: {
           changeHandle() {
               window.globalVue.$emit('change', '456');
           }
       }
   }
   </script>
   
   // 组件 B
   <template>
       <div>监听事件</div>
   </template>
   <script>
   export default