一、什么是组件通信
1、通信是组件或模块之间的数据交互。
2、组件多重通信就形成了数据流，数据流管理的优劣决定了产品能否上线，返工是否频繁的问题。
3、Vue中有哪些常见的通信方案？
组件树的概念：
在Vue中，组件树（Component Tree）指的是一个由多个嵌套的Vue组件组成的层级结构。每个组件可以是另一个组件的子组件，这样层层嵌套形成一棵树。这种结构允许开发者构建复杂和可重用的用户界面。
（1）父子组件通信
父传子使用自定义属性（使用props接收），子传父使用自定义事件（使用$emit）。
（2）状态提升
状态就是数据的意思。
当兄弟组件之间需要共享数据时，我们通常的做法是把这个数据定义在它们的共同的父组件中，再通过自定义属性实现数据共享。
（3）provide/inject通信
这是一种在组件树间自上而下的一种数据通信方案。
也就是说，只能从父级组件中向后代组件传递。
是Vue提供的两个内置选项，可以对象写法，也可以function写法。
需要注意的是，当provide提供动态数据（声明式变量）时，动态数据发生变化，后代组件们不会自动更新，这是为什么呢？
因为生命周期流程中，是在beforeCreate()和created()之间，inject注入provide数据。
所以下面在例子代码里，更新父组件中的provide数据，子组件不会更新！！！
（4）ref通信
ref是Vue内置的一个属性，就像id、class一样，每一个HTML元素或组件都有这个属性。
ref作用在HTML元素上，得到DOM实例，ref作用在组件上得到组件实例。
使用ref访问组件实例，可以进一步访问组件中的数据和方法。
ref是一种快捷的DOM访问方式，当然ref也可以作用在组件上得到组件实例对象。这些ref得到的DOM实例或组件实例，使用this.$refs来访问它们。
ref尽量少用，除非某些难搞的需求。
（5）slot插槽通信
借助于<slot>组件实现从子组件向父组件传递数据。
借助this.$slots访问父组件中的插槽实例。
（6）parent/children通信
借助parent/children这两个API，可以实现在任一组件中访问组件树中的其它任意组件实例。可以做到在组件中随意穿梭。
（7）attrs/listeners通信
借助$attrs可以访问父组件传递过来的自定义属性（除了class和style外）。
借助$listeners可以访问父组件给的自定义事件。
在某些场景下，attrs/listeners可以替代props/$emit()这种通用的通信方式。
（8）事件总线
借助Vue内置的事件系统。（on/emit/off/once）实现"订阅-发布"模式的通信。这种通信方式是一对多的，且与组件的层级无关。
（9）Vuex通信
这是Vue架构中终极的通信方案，也是Vue架构中用的最多的一种通信方式。
二、状态提升例子
有一个变量大哥点了加1，二哥点了减1。
html
<html>
<head>
<title>组件通信-状态提升</title>
<style>
</style>
</head>
<body>
<div id="app">
<comp-child-a :numa="num" @add="num+=$event"></comp-child-a>
<hr>
<comp-child-b :numb="num" @sub="num-=$event"></comp-child-b>
<hr>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
Vue.component('comp-child-a', {
template: `
<div>
<div>大哥 {{numa}}</div>
<button @click='$emit("add", 1)'>加1</button>
</div>
`,
props: {
numa: {type: Number, default: 0}
}
})
Vue.component('comp-child-b', {
template: `
<div>
<div>二哥 {{numb}}</div>
<button @click='$emit("sub", 1)'>减1</button>
</div>
`,
props: {
numb: {type: Number, default: 0}
}
})
const app = new Vue({
// 变量定义在父组件中
data() {
return {
num: 1
}
}
})
app.$mount('#app')
</script>
</body>
</html>三、provide/inject例子
注意：provide提供声明式变量numf，如果在父组件中修改了app.num的值，子组件中不会改变！！！
html
<html>
<head>
<title>组件通信-provide/inject</title>
<style>
</style>
</head>
<body>
<div id="app">
<comp-child-c></comp-child-c>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
Vue.component('comp-child-c', {
template: `
<div>
<div>三哥 {{msg}} - {{numf}}</div>
<span v-for='i in list' v-text='i'></span>
</div>
`,
// 从组件树的上下文中注入provide的数据
inject: ['msg','list','numf']
})
const app = new Vue({
// 变量定义在父组件中
data() {
return {
num: 1
}
},
// 从当前组件节点开始，向后代组件们传递数据
// 工作中更推荐function写法，因为可以用this
// provide: {
// msg: "你好",
// list: [1,2,3,4]
// }
provide() {
return {
msg: '你好',
list: [1,2,3,4],
numf: this.num // 动态数据
}
}
})
app.$mount('#app')
</script>
</body>
</html>四、ref例子
html
<html>
<head>
<title>组件通信-ref</title>
<style>
</style>
</head>
<body>
<div id="app">
<div ref='box'>普通HTML标签</div>
<comp-child-d ref='dd'></comp-child-d>
<button @click='handle'>测试ref操作</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
Vue.component('comp-child-d', {
template: `
<div>
<div>四哥 {{age}}</div>
</div>
`,
data() {
return {
age: 10
}
},
methods: {
changeAge(arg) {
this.age = arg || 10
}
}
})
const app = new Vue({
// 变量定义在父组件中
data() {
return {
num: 1
}
},
methods: {
handle() {
console.log('---refs', this.$refs)
this.$refs.box.style.color = 'red'
this.$refs.dd.changeAge(20)
}
}
})
app.$mount('#app')
</script>
</body>
</html>点击按钮：
获取到DOM实例和组件实例：
