vue 组件之间通信的多种方案（3）

三、封装全局公共 BUS 数据改变，触发监听方法

　　1、utils 目录下 bus.js 文件代码示例：

import Vue from 'vue'
const Bus = new Vue()
export default Bus

　　2、通信传递引用 bus 示例：

import bus from '@/utils/bus'; // 引入

methods: {
  changValue() {
    bus.$emit('changeValue', 'zs');      
  }  
}

　　3、 通信接收方法触发 示例：

  import bus from '@/utils/bus';
  mounted() {
    bus.$on('changeValue', (e) => {
        console.log(e); // zs
      }
    });
  },

　　PS: BUS 更适用于组件之间关联不大，或者层级嵌套比较深的组件之前传值

四、provide\inject 上级向下级单项传参

　　这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。

　　理解：只要上级组件提供provide属性，下级组件无论层级多深都可以通过inject 注入依赖　　

　　ps: 这种方式传递参数是不可响应的，当provide 中值的改变不会影响到inject的接收

　　父组件示例：

<template>
  <div id="app">
    <child></child>
    <button type="button" @click="changeProvide">change</button>
  </div>
</template>

<script>
import Child from "@/components/Child";
export default {
  name: "App",
  provide: {
    name: 'zs'
  },
  components: {
    Child,
  },
  methods: {
    changeProvide() {
      this.$set(this._provided, 'name', 'ls')
      console.log(this._provided) // ls
    }
  }
};

　　子组件示例：

<template>
  <div class="child-deep">
    <child-deep></child-deep>
  </div>
</template>

<script>
import ChildDeep from '@/components/ChildDeep'
export default {
  name: "Child",
  components: {
    ChildDeep
  }
}
</script>

　　最下级组件示例：

<template>
  <div class="child-deep">
    <button type="button" @click="getProvide">button</button>
  </div>
</template>

<script>
export default {
  inject: ['name'],
  methods: {
    getProvide() {
      console.log(this.name); // zs zs
    }
  }
}
</script>

五、其他通信方式

　　1、引用 vuex 这个状态管理工具；

　　2、子组件通过this.$parents获取上层组件变量与方法；

　　3、父组件通过 ref 属性 this.$refs[ref] 获取子组件变量与方法。