Vue组件间通信：props、slot与事件-优快云博客

本文介绍了Vue中组件间通信的三种方式：1) 父组件通过props向下传递数据；2) 使用slot插槽进行内容传递；3) 通过事件和公共通信对象实现兄弟组件间通信。详细阐述了每种方法的具体步骤和适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue组件间传参:3种

示例: 组件图示结构如下:
在这里插入图片描述

如何 : 属性下行, 父组件将自己的模型变量保存在自定义属性中绑定给子组件。
适用于: 父组件传递的数据,在子组件中,也需要操作时(需要反复使用,计算等)

具体步骤:2步
1.在父组件中: template里的子组件开始标签中, 添加自定义属性, 让父组件将自己的模型变量保存在, 子组件的自定义属性中
</子组件名 :自定义属性="父组件的模型变量" ></子组件名>
建议 : 通常设置自定义属性名和父组件的变量名相同 !

使用 : 子组件中props中的自定义属性用法和data中的变量用法完全一样!

如何 : 子组件中插槽显示什么内容, 由父组件对应卡片内容决定。
适用于: 父组件传递的数据,在子组件中,不需要操作(仅做展示内容使用)

具体步骤:2步
1.在父组件中:
template里的子组件的内容区域添加**“卡片和卡片内容”**
</子组件名> <template slot="卡片名">{{父组件模型变量}}</template> </子组件名>
**卡片名 😗*对应子组件的插槽名
**卡片内容 😗*就是{{}}里绑定的"父组件模型变量":

2.在子组件中 :template里内容, 需要值的位置, 添加 “插槽” ,等待接收父组件 “卡片”,用父组件的**“卡片内容"替换子组件的"插槽”**
<li> <slot name="插槽名" ></solt> </li>
在这里插入图片描述

如何 : 事件上行, 父组件中的标签上定义自定义事件,在子组件中触发自定义事件，并传参。

具体步骤:2步
1.在父组件中:父需要在引用的子组件上,添加一个自定义的事件,并绑定父组件的一个处理函数
</子组件名 @父组件自定义事件名="父组件的一个处理函数"> </子组件名>

在子组件中: 绑定自己的事件处理函数, 在处理函数里面, 通过this.$emit (" 父组件自定义事件名 ", 参数(子组件自己的变量) )去触发父组件的自定义事件

如何 : 通过公共的通信对象( Vue)实现

//bus.js文件
import Vue from 'vue'
export default new Vue();

//main.js中引入,并添加进Vue的原型对象
import bus from './bus'
Vue.prototype.bus=bus;

数据的接收方组件 : 在自己加载完成后(created) ,向公共的通信对象上 , 添加一个自定义的事件. 事件名要绑定上自己的一个处理函数
注意:
①add_task :自定义事件名,绑定的是自己的一个add函数
②若写成this.add() ,回调函数里的this指的是window, 所以需要用bind替换一下
数据的发送方组件 : 在自己的事件处理函数中,找到公共的通信对象 , 用this.$emit (" 数据的接收方组件组件自定义事件名 ", 参数(数据的发送方组件自己的变量) )去触发数据接收方提前在公共的通信对象上绑定好的事件,并传参.