当前位置：首页 > news >正文

前端基础之《Vue（14）—组件通信》

news 来源：原创 2025/5/7 15:19:31

一、什么是组件通信

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，可以实现在任一组件中访问组件树中的其它任意组件实例。可以做到在组件中随意穿梭。

（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>

页面显示：