Vue 组件间通信

发表于2025-09-15|更新于2025-12-11|vue框架

|总字数:452|阅读时长:1分钟|浏览量:

Vue 组件间通信

1. 组件间通信的概念

指 Vue 项目中不同组件（如父子组件、兄弟组件、跨层级组件）之间传递数据、事件或状态的机制，是组件化开发中实现功能协同的基础。

2. 组件间通信解决了什么问题

实现组件间的数据共享（如父子组件传递用户信息）；
完成组件间的行为联动（如子组件触发父组件的弹窗）；
解耦组件逻辑，让单个组件更独立、可复用。

3. 组件间通信的分类

按组件关系可分为三类：

父子组件通信：最常见的通信场景（如父传子、子传父）；
兄弟组件通信：同一父组件下的子组件之间通信；
跨层级 / 任意组件通信：非直接嵌套的组件（如爷孙组件、无关联组件）之间通信。

4. 组件间通信的方案（Vue2 常用）

通信场景	方案	说明
父→子	props	父组件通过属性传递数据，子组件用`props`接收
子→父	$emit + 自定义事件	子组件触发`this.$emit('事件名', 数据)`，父组件通过`@事件名`监听
父子 / 跨层级	$parent / $children	直接访问父 / 子组件实例（不推荐，耦合性高）
跨层级	$attrs / $listeners	传递未被`props`接收的属性 / 事件，配合`v-bind="$attrs"`/`v-on="$listeners"`透传
跨层级 / 任意组件	Vuex	全局状态管理库，统一存储和修改数据
任意组件	事件总线（EventBus）	基于 Vue 实例的`$on`/`$emit`实现（Vue2 中需自行创建，如`new Vue()`）
跨层级	provide / inject	父组件`provide`提供数据，后代组件`inject`注入（适用于深度嵌套场景）

文章作者: BoardYoungC

文章链接: http://example.com/2025/09/15/vue/Vue%20%E7%BB%84%E4%BB%B6%E9%97%B4%E9%80%9A%E4%BF%A1/

版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 BoardYoungC！

相关推荐

ES6中 Promise在以往我们如果处理多层异步操作，我们往往会像下⾯那样编写我们的代码 12345671 doSomething(function(result) {2 doSomethingElse(result, function(newResult) {3 doThirdThing(newResult, function(finalResult) {4 console.log('得到最终结果: ' + finalResult);5 }, failureCallback);6 }, failureCallback);7 }, failureCallback); promise 对象仅有三种状态 pending （进⾏中） fulfilled （已成功） rejected （已失败）对象的状态不受外界影响，只有异步操作的结果，可以决定当前是哪⼀种状态⼀旦状态改变（从 pending 变为 fulfilled 和从 pending 变为 rejected...

ES6中数组新增扩展

ES6中数组新增了扩展扩展运算符的应⽤ES6通过扩展元素符 … ，好⽐ rest 参数的逆运算，将⼀个数组转为⽤逗号分隔的参数序列 1234561 console.log(...[1, 2, 3])2 // 1 2 33 console.log(1, ...[2, 3, 4], 5)4 // 1 2 3 4 55 [...document.querySelectorAll('div')]6 // [<div>, <div>, <div>] 主要⽤于函数调⽤的时候，将⼀个数组变为参数序列 123456781 function push(array, ...items) {2 array.push(...items);3 }4 function add(x, y) {5 return x + y;6 }7 const numbers = [4, 38];8 add(...numbers) // 42 ES6 允许为函数的参数设置默认值 1234561 function log(x,...

Node 中的 Stream

Node 中的 Stream流（Stream），是⼀个数据传输⼿段，是端到端信息交换的⼀种⽅式，⽽且是有顺序的,是逐块读取数据、处理内容，⽤于顺序读取输⼊或写⼊输出 Node.js 中很多对象都实现了流，总之它是会冒数据（以 Buffer 为单位）它的独特之处在于，它不像传统的程序那样⼀次将⼀个⽂件读⼊内存，⽽是逐块读取数据、处理其内容，⽽不是将其全部保存在内存中流可以分成三部分： source 、 dest 、 pipe 在 source 和 dest 之间有⼀个连接的管道 pipe ,它的基本语法是 source.pipe(dest) ， source 和 dest 就是通过pipe连接，让数据从 source 流向了 dest 在 NodeJS ，⼏乎所有的地⽅都使⽤到了流的概念，分成四个种类： • 可写流：可写⼊数据的流。例如 fs.createWriteStream() 可以使⽤流将数据写⼊⽂件 • 可读流：可读取数据的流。例如fs.createReadStream() 可以从⽂件读取内容 • 双⼯流：既可读⼜可写的流。例如 net.Socket •...

Node 中的 Buffer

Node 中的 Buffer在 Node 应⽤中，需要处理⽹络协议、操作数据库、处理图⽚、接收上传⽂件等，在⽹络流和⽂件的操作中，要处理⼤量⼆进制数据，⽽ Buffer 就是在内存中开辟⼀⽚区域（初次初始化为8KB），⽤来存放⼆进制数据在上述操作中都会存在数据流动，每个数据流动的过程中，都会有⼀个最⼩或最⼤数据量如果数据到达的速度⽐进程消耗的速度快，那么少数早到达的数据会处于等待区等候被处理。反之，如果数据到达的速度⽐进程消耗的数据慢，那么早先到达的数据需要等待⼀定量的数据到达之后才能被处理这⾥的等待区就指的缓冲区（Buffer），它是计算机中的⼀个⼩物理单位，通常位于计算机的 RAM 中简单来讲， Nodejs 不能控制数据传输的速度和到达时间，只能决定何时发送数据，如果还没到发送时间，则将数据放在 Buffer 中，即在 RAM 中，直⾄将它们发送完毕 Buffer 类在全局作⽤域中，⽆须 require 导⼊创建 Buffer 的⽅法有很多种，我们讲讲下⾯的两种常⻅的形式： • Buffer.from() •...

Vue 常用修饰符

Vue 常用修饰符一、事件修饰符修饰符是什么功能应用场景 .stop 阻止事件冒泡的修饰符阻止当前事件向父元素冒泡子元素点击事件不影响父元素 .prevent 阻止默认行为的修饰符阻止标签的默认行为（如 a 标签跳转、表单提交）自定义表单提交逻辑 .once 事件仅触发一次的修饰符事件绑定后仅执行一次，之后自动解绑按钮点击后仅响应一次（如提交） .self 仅自身触发的修饰符仅当事件触发在当前元素本身时才执行避免父元素冒泡事件触发自身 .capture 事件捕获阶段触发的修饰符事件在捕获阶段（而非冒泡阶段）执行需要优先处理父元素事件的场景二、按键修饰符修饰符是什么功能应用场景 .enter 监听回车键的修饰符仅当按下回车键时触发事件输入框按回车提交内容 .tab 监听 Tab 键的修饰符仅当按下 Tab 键时触发事件表单输入框切换焦点 .delete 监听删除 / 退格键的修饰符仅当按下删除 / 退格键时触发事件输入框内容删除时的逻辑处理 .esc 监听...

axios1. axios 是什么axios 是一个基于 Promise 的HTTP 请求库，用于浏览器和 Node.js 环境中发送网络请求（如 GET、POST 等），是 Vue 项目中常用的接口请求工具，支持请求拦截、响应拦截、取消请求等功能。 2. 为什么要封装在 Vue 中封装 axios 主要是为了提升代码的复用性、可维护性与规范性，具体原因包括：统一配置：集中管理请求基地址、超时时间等公共配置；统一拦截：全局处理请求头（如携带 Token）、响应错误（如登录失效、接口报错）；简化调用：封装通用的请求方法（如get/post），减少重复代码；统一规范：约束接口请求的参数格式、响应处理逻辑。 3. 如何封装（Vue2 中）以下是 Vue2 中 axios 的典型封装步骤：（1）创建 axios 实例并配置公共参数12345678// src/utils/request.jsimport axios from 'axios';// 创建axios实例const service = axios.create({ ...

数据加载中