Vue 组件之间传递数据

运输-传输-通信-传递数据-通讯 前端

说明:

• 这里所说的组件在某些时候也可指原生的html元素

父组件单向传递给后代组件:

传给所有的后代组件

• child::Vue provide
  • 后代使用Vue inject数组选项 接受父代所暴露的变量接受传递的变量

1. 传递给子组件

• 使用[[笔记/计算机知识/app应用/webAPP/前端/Vue/props|[Vue v-bind命令 单向加载组件数据到html中|v-bind命令]]或Vue attrs中
• 使用插槽语法, 使html数据单向传递到组件中
• 使用v-model命令双向同步内外组件中的数据

1. 父组件访问子组件实例:

• child::Vue 访问子组件实例 访问子html标签
  • 通常直接访问子组件实例中的方法

子组件传递给父组件:

• child::Vue 访问子组件实例 访问子html标签

通过事件进行传递

• child::Vue 监听后代组件内事件

通过响应式进行传递

• child::Vue v-model命令 双向同步html数据与组件数据

应用场景

• 获取选中的组件
  • select标签选择框
    • 将选项的value响应式绑定给一个组件内的变量

兄弟组件之间进行通信:

2. 方法之一

2.1. 利用第三方库⭐

以下包都可以实现

• child::pinia实现vue兄弟组件通讯
• mitt

方法之一：通过父组件作为桥梁

• 兄弟A传给父组件
• 父组件传给兄弟B
• 如果两个兄弟之间的通讯是双向的，则要求父组件与子组件的通讯是双向的
  • 因为可能是父组件传给兄弟A，也可能是兄弟A传给父组件

1. 方法之一：js事件总线

1.1. 利用js原生的事件

• 直接在document中发布事件
• 在document中监听事件

/** 组件 A */
document.addEventListener('自定义事件', ev => console.log(ev));
// CustomEvent {isTrusted: false, detail: "我是 payload", type: "自定义事件", target: document, currentTarget: document, …}
 
/** 组件 B */
document.dispatchEvent(new CustomEvent('自定义事件', { detail: '我是 payload' }));

手写一个观察者模式

• 事件总线可以自定义一个全局类, 在里面简单实现监听器和触发器

3. 方法之一：vue实例总线

在vue3中已废弃 通过事件中心/事件总线/eventBus