一、什么是组件通信
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插槽通信
从子组件向父组件传递数据，在父组件的插槽中，使用#default='scoped'访问子组件<slot>回传的数据。
子组件访问插槽，借助this.$slots访问父组件中的插槽实例。
这种通信在组件库中、工作中，非常常见。
注意：在自定义插槽<comp-child-e>包起来的内容是父组件的。
（6）$parent/$children通信
借助$parent/$children这两个API，可以实现在任一组件中访问组件树中的其它任意组件实例。可以做到在组件中随意穿梭。
$parent表示的是当前组件的父组件实例对象。
$children表示的是当前组件的子组件们。
（7）$attrs/$listeners通信
借助$attrs可以访问父组件传递过来的自定义属性（除了class和style外）。
借助$listeners可以访问父组件给的自定义事件。
在某些场景下，$attrs/$listeners可以替代props/$emit()这种通用的通信方式。
（8）事件总线
借助Vue内置的事件系统。（$on/$emit/$off/$once）实现“订阅-发布”模式的通信。这种通信方式是一对多的，且与组件的层级无关。
（9）Vuex通信
这是Vue架构中终极的通信方案，也是Vue架构中用的最多的一种通信方式。
二、状态提升例子
有一个变量大哥点了加1，二哥点了减1。
<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/vue@2.7.16/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>
<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/vue@2.7.16/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>
<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/vue@2.7.16/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实例和组件实例：
五、插槽例子
在Vue中，凡是被包裹在自定义组件内部的东西，都是插槽内容。
问题：插槽加上作用域后，子组件内插槽内的this.$slots拿不到父组件内的插槽内容？
解答：加了作用域后，要取$scopedSlots属性。
<html>
<head>
<title>组件通信-插槽</title>
<style>
</style>
</head>
<body>
<div id="app">
<comp-child-e>
<template #default='scoped'>
<div>别墅一栋 {{scoped.foo}} {{scoped.bar}}</div>
</template>
<template #car='scoped'>
<div>{{scoped.car2}}专用车位</div>
</template>
</comp-child-e>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
Vue.component('comp-child-e', {
template: `
<div>
<div>五哥</div>
<slot name='default' foo='你好' bar='世界'>
<div>我的房子</div>
</slot>
<slot name='car' :car2='car1'>
<div>我的车位</div>
</slot>
</div>
`,
data() {
const cars = ['宝马','奔驰']
const val = cars[Math.floor(Math.random()*2)]
return {
car1: val
}
},
mounted() {
// 在子组件中使用this.$slots来访问父组件给的插槽内容
//console.log('---this', this)
console.log('---slot', this.$slots)
console.log('---scoped slot', this.$scopedSlots)
}
})
const app = new Vue({
})
app.$mount('#app')
</script>
</body>
</html>
页面显示：
控制台：
六、$parent/$children例子
<html>
<head>
<title>组件通信-$parent/$children</title>
<style>
</style>
</head>
<body>
<div id="app">
<comp-child-f></comp-child-f>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
Vue.component('comp-child-f', {
template: `
<div>
<div>六哥 {{num}}</div>
</div>
`,
data() {
return {
num: 1
}
},
methods: {
add() {
this.num++
}
}
})
const app = new Vue({
mounted() {
console.log('app---$parent', this.$parent)
console.log('app---$children', this.$children)
}
})
app.$mount('#app')
</script>
</body>
</html>
页面显示：
控制台修改num：
页面变化：
七、$attrs/$listeners例子
<html>
<head>
<title>组件通信-$attrs/$listeners</title>
<style>
.page span {
display: inline-block;
padding: 0 10px;
cursor: pointer;
}
.page span.on {
color: red;
}
</style>
</head>
<body>
<div id="app">
<comp-child-g :page='page' @change='changePage'></comp-child-g>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
Vue.component('comp-child-g', {
template: `
<div class="page">
<div>七哥</div>
<span v-for='i in pageArr' v-text='i' :class='{on:$attrs.page===i}' @click='$listeners.change(i)'></span>
</div>
`,
// 这里不用props接收，用attrs
mounted() {
console.log('g---attrs', this.$attrs)
console.log('g---listeners', this.$listeners)
},
computed: {
pageArr() {
const p = this.$attrs.page
if (p<=3) return [1,2,3,4,5]
else return [p-2,p-1,p,p+1,p+2]
}
}
})
const app = new Vue({
data() {
return {
page: 1
}
},
methods: {
changePage(reg) {
this.page = reg || 1
}
}
})
app.$mount('#app')
</script>
</body>
</html>
页面显示：
控制台修改page：
页面变化：
