Vue组件之间的通信方式都有哪些

  • Vue组件之间的通信方式
    • 组件间通信的概念
    • 组件间通信解决了什么
    • 组件间通信的分类
      • 父子组件之间的通信
      • 兄弟组件之间的通信
      • 祖孙与后代组件之间的通信
      • 非关系组件间之间的通信
  • 组件间通信的方案
    • props传递数据
    • $emit 触发自定义事件
    • ref
    • EventBus
    • parent、root
    • attrs与listeners
    • provide 与 inject
    • vuex
  • 小结

此文章,来源于印客学院的资料,这里只是分享,便于查漏补缺。

Vue组件之间的通信方式

组件间通信的概念

开始之前,我们把 组件间通信 这个词进行拆分

  • 组件
  • 通信

都知道 组件 是 vue 最强大的功能之一,vue 中每一个 .vue 我们都可以视之为一个组件。

通信 指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的。

广义上,任何信息的交通都是通信组件间通信即指组件(.vue)通过某种方式来传递信息以达到某个目的

举个栗子我们在使用 UI框架中的 table 组件,可能会往 table 组件中传入某些数据,这个本质就形成了组件之间的通信

组件间通信解决了什么

在古代,人们通过驿站、飞鸽传书、烽火报警、符号、语言、眼神、触碰等方式进行信息传递,到了今天,随着科技水平的飞速发展,通信基本完全利用有线或无线电完成,相继出现了有线电话、固定电话、无线电话、手机、互联网甚至视频电话等各种通信方式

从上面这段话,我们可以看到 通信的本质是信息同步,共享回到 vue 中

每个组件之间的都有独自的作用域,组件间的数据是无法共享的

但实际开发工作中我们常常需要让组件之间共享数据,这也是组件通信的目的

要让它们互相之间能进行通讯这样才能构成一个有机的完整系统

更多详细内容,请微信搜索“前端爱好者戳我 查看

组件间通信的分类

组件间通信的分类可以分成以下

父子组件之间的通信
兄弟组件之间的通信
祖孙与后代组件之间的通信
非关系组件间之间的通信

关系图:

组件间通信的方案

整理 vue 中8种常规的通信方案

  1. 通过 props 传递
  2. 通过 $emit 触发自定义事件
  3. 使用 ref
  4. EventBus
  5. parent或 root
  6. attrs 与 listeners
  7. Provide 与 Inject
  8. Vuex

props传递数据

适用场景: 父组件传递数据给子组件

  • 子组件设置 props属性,定义接收父组件传递过来的参数
  • 父组件在使用子组件标签中通过字面量来传递值

Children.vue

props:{ // 字符串形式name:String // 接收的类型参数// 对象形式age:{ type:Number, // 接收的类型为数值defaule:18, // 18 默认值为18require:true // age 属性必须传递} 
}

Father.vue

<Children name="jack" age=18 />

$emit 触发自定义事件

适用场景: 子组件传递数据给父组件

  • 子组件通过 e m i t 触发自定义事件, ‘ emit触发自定义事件, ` emit触发自定义事件,emit` 第二个参数为传递的数值
  • 父组件绑定监听器获取到子组件传递过来的参数

Children.vue

this.$emit('add', good)

Father.vue

<Children @add="cartAdd($event)" />

ref

适用场景: 父组件调用子组件

  • 父组件在使用子组件的时候设置 ref
  • 父组件通过设置子组件 ref 来获取数据

父组件

<Children ref="foo" /> this.$refs.foo // 获取子组件实例,通过子组件实例我们就能拿到对应的数据

EventBus

使用场景: 兄弟组件传值

  • 创建一个中央事件总线 EventBus
  • 兄弟组件通过 e m i t 触发自定义事件, emit 触发自定义事件, emit触发自定义事件,emit 第二个参数为传递的数值
  • 另一个兄弟组件通过 $on 监听自定义事件

Bus.js

// 创建一个中央事件总线类class Bus { constructor() { this.callbacks = {}; // } $on(name, fn) { this.callbacks[name] = this.callbacks[name] || []; this.callbacks[name].push(fn); } $emit(name, args) { if (this.callbacks[name]) { this.callbacks[name].forEach((cb) => cb(args)); } } 
}// main.js
Vue.prototype.$bus = new Bus() // 将bus挂载到vue实例的原型上// 另一种方式
Vue.prototype.$bus = new Vue() // Vue已经实现了Bus的功能

Children1.vue

this.$bus.$emit('foo')

Children2.vue

this.$bus.$on('foo', this.handle)

parent、root

使用场景: 通过共同祖辈 $parent 或者 $root 搭建通信桥连

兄弟组件

this.$parent.on('add', this.add)

另一个兄弟组件

this.$parent.emit('add' )

attrs与listeners

适用场景: 祖先传递数据给子孙

  • 设置批量向下传属性 $attrs 和 $listeners
  • 包含了父级作用域中不作为 prop 被识别(且获取)的特性绑定( class 和 style 除外).
  • 可以通过 v-bind=“$attrs” 传入内部组件
// child: 并未在props中声明foo
<p>{{$attrs.foo}}</p> // parent 
<HelloWorld foo="foo"/>// 给Grandson隔代传值,communication/index.vue
<Child2 msg="lalala" @some-event="onSomeEvent"></Child2> // Child2做展开
<Grandson v-bind="$attrs" v-on="$listeners"></Grandson> // Grandson使用
<div @click="$emit('some-event', 'msg from grandson')"> {{msg}} 
</div>

provide 与 inject

  • 在祖先组件定义 provide 属性,返回传递的值
  • 在后代组件通过 inject 接收组件传递过来的值

祖先组件

provide(){ return { foo:'foo' } 
}

后代组件

inject:['foo'] // 获取到祖先组件传递过来的值

vuex

适用场景: 复杂关系的组件数据传递

  • Vuex作用相当于一个用来存储共享变量的容器

  • state 用来存放共享变量的地方
  • getter ,可以增加一个 getter 派生状态,(相当于 store 中的计算属性),用来获得共享变量的值
  • mutations 用来存放修改 state 的方法
  • actions 也是用来存放修改state的方法,不过 action 是在 mutations 的基础上进行。常用来做一些异步操作

小结

  • 父子关系的组件数据传递选择 props 与 $emit 进行传递,也可选择 ref
  • 兄弟关系的组件数据传递可选择 $bus,其次可以选择 $parent 进行传递
  • 祖先与后代组件数据传递可选择 attrs 与 listeners 或者 Provide 与 Inject
  • 复杂关系的组件数据传递可以通过 vuex 存放共享的变量

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/650590.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Oracle分栏(非分页)查询

不知道Oracle怎么进行数据分栏(分栏: 因数据列过长, 部分数据作为新列显示). 在这里先记录一下粗浅的查询方法. 数据源例子: select 日用百货 as cat, 手电筒 as name, 20 as amount, 2024-01-27 as dt from dualunion allselect 餐饮美食 as cat, 鸡公煲 as name, 15.9 as amo…

QT 中如何使用 JSON 功能?

在 Qt 中&#xff0c;您可以使用 QJsonDocument、QJsonObject 和 QJsonArray 类来处理 JSON 数据。以下是一个简单的示例&#xff0c;说明如何在 Qt 中使用这些类来解析和生成 JSON 数据&#xff1a; 1. 包含必要的头文件 首先&#xff0c;确保您的项目中包含了必要的 Qt JSO…

SSEBop FEWS V6蒸散发ET年和月尺度数据分享

一、数据简介 SSEBOP FEWS V6是一个用于估算蒸散发&#xff08;evapotranspiration&#xff09;的模型或数据集。蒸散发是指地表和植物蒸发以及植物蒸腾的总和&#xff0c;是水循环中重要的组成部分。 SSEBOP FEWS V6是由美国地质调查局&#xff08;USGS&#xff09;开发的一…

C# LING查询语法学习,扩展方法的使用

class Program { #region 示例1&#xff1a;不使用LINQ查询数组 //static void Main(string[] args) //{ // int[] nums { 1, 7, 2, 6, 5, 4, 9, 13, 20 }; // List<int> list new List<int>(); // foreach (int item in nums) …

Genome-wide association studies in R

全基因组关联&#xff08;GWA&#xff09;研究扫描整个物种基因组&#xff0c;寻找多达数百万个SNPs与特定感兴趣特征之间的关联。值得注意的是&#xff0c;感兴趣的性状实际上可以是归因于群体的任何类型的表型&#xff0c;无论是定性的&#xff08;例如疾病状态&#xff09;还…

支持IPv4与IPv6双协议栈的串口服务器,IPv6串口服务器

物联网是啥玩意儿&#xff1f;这是首先要搞明白的。按照百度百科的说法&#xff0c;是将各种信息传感设备&#xff0c;如射频识别&#xff08;RFID&#xff09;装置、红外感应器、全球定位系统、激光扫描器等种种装置与互联网结合起来而形成的一个巨大网络。这个说法有些复杂&a…

Java入门高频考查基础知识7-深入挖掘Java集合框架的奇幻世界2(39题2.8万字参考答案)

Java 集合是 Java 编程中至关重要的组成部分&#xff0c;它为开发者提供了丰富、灵活、高效的数据结构和算法。无论是初学者还是有经验的开发者&#xff0c;在使用 Java 进行编程时都会频繁地接触到集合框架。这篇文章将深入探讨 Java 集合的重要性&#xff0c;以及为什么它对于…

简单记录一下如何安装python以及pycharm(图文教程)(可供福建专升本理工类同学使用)

本教程主要给不懂计算机的或者刚刚开始学习python的同学&#xff08;福建专升本理工类&#xff09;&网友学习使用&#xff0c;基础操作&#xff0c;比较详细&#xff0c;其他问题等待补充&#xff01; 安装Python 1.进入python官网&#xff08;https://www.python.org/&a…

【Vue】1-3、Webpack 中的 loader

一、概述 在实际开发过程中&#xff0c;webpack 默认只能打包处理以 .js 后缀结尾的模块。 其他的非 .js 后缀名结尾的模块 webpack 默认处理不了&#xff0c;需要调用 loader 加载器才可以正常打包&#xff0c;否则会报错&#xff01; loader 加载器的作用&#xff1a;协助…

Unity 命令模式(实例详解)

文章目录 示例1&#xff1a;基础命令类结构示例2&#xff1a;旋转对象命令示例3&#xff1a;增加道具命令示例4&#xff1a;切换场景命令示例5&#xff1a;播放音效命令 在Unity中使用命令模式&#xff08;Command Pattern&#xff09;是一种常见的设计模式&#xff0c;用于实现…

在Python中的集合是什么

目录 创建集合 集合的特性 集合的基本操作 集合的运算 集合的遍历和判断元素是否存在 总结 在Python中&#xff0c;集合&#xff08;Set&#xff09;是一个内置的数据类型&#xff0c;用于存储不重复的元素集合。集合的特点是元素是无序的&#xff0c;且每个元素是唯一的…

C语言-算法-背包

[USACO07DEC] Charm Bracelet S&#xff08;01背包&#xff09; 题目描述 Bessie has gone to the mall’s jewelry store and spies a charm bracelet. Of course, she’d like to fill it with the best charms possible from the N (1 ≤ N ≤ 3,402) available charms. E…

apt-mark详解

文章目录 1、简介2、apt-mark auto packagename3、apt-mark manual4、apt-mark hold5、apt-mark unhold6、apt-mark showauto7、apt-mark showmanual8、apt-mark showhold 1、简介 apt-mark常用于标记一个包是否是自动安装的。 2、apt-mark auto packagename 标记一个包为自…

ssh异常报错:Did not receive identification string from

一、问题描述 某次外出在异地工作场所xshell炼乳远程服务器时&#xff0c;报错&#xff1a;Connection closed by foreign host. D&#xff0c;服务器查看secure日志或sshd服务状态会显示&#xff1a;id not receive identification string from client_ip; 二、分析处理 1&a…

多表查询,

1&#xff0c;多表查询 实际开发中&#xff0c;一个项目通常需要很多张表才能完成。例如:一个商城项目就需要分类表(category)、商品表(products)、订单表(orders)等多张表。且这些表的数据之间存在一定的关系&#xff0c;接下来我们将在单表的基础上&#xff0c;一起学习多表…

如何在前端项目里接入Sentry监控系统并通过企业微信通知

能不能让用户录个屏过来呀&#xff1f; 用户使用的是什么机型的手机&#xff1f; 用户使用的什么浏览器呀&#xff1f; 用户的网络是什么情况&#xff1f; … … 线上出现问题时&#xff0c;技术部和业务部同学之间的对话诸如此类…业务同学也很栓Q呀&#xff0c;硬着头皮去问客…

element-UI上传文件后valid提示不消失

问题描述&#xff1a;上传文件完成后&#xff0c;必填信息提示不消失 解决方法&#xff1a;在<el-form-item>标签添加show-message属性&#xff0c;字段为空时才显示提示信息 <el-form-item :prop"fileList" :show-message"!form.fileList || !form.f…

OPEN NT 4.5 编译方法和源代码下载

OPEN NT 4.5&#xff08;源代码编译方法&#xff09; 编译Windows NT 4.0到操作系统的详细方法 OPEN 4.5 ​​​​​​下载 &#xff1a;https://download.csdn.net/download/MYMOTOE6/88786570 ISO https://download.csdn.net/download/MYMOTOE6/88786572 OPEN NT 4.5&#…

LeetCode:1701. 平均等待时间(Java 模拟)

目录 1701. 平均等待时间 题目描述&#xff1a; 实现代码与解析&#xff1a; 简单模拟 原理思路&#xff1a; 1701. 平均等待时间 题目描述&#xff1a; 有一个餐厅&#xff0c;只有一位厨师。你有一个顾客数组 customers &#xff0c;其中 customers[i] [arrivali, time…

为什么网页打开慢?是服务器的问题吗?

当我们遇到网页加载缓慢时&#xff0c;首先想到的可能是服务器的问题。的确&#xff0c;服务器是影响网页加载速度的一个重要因素。然而&#xff0c;这并非是唯一的原因。实际上&#xff0c;网页加载速度受多种因素影响&#xff0c;包括但不限于服务器、网络带宽、DNS解析时间、…