三、封装全局公共 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] 获取子组件变量与方法。
原文：https://www.cnblogs.com/eightabs/p/14051564.html