Vue组件之间的通信方式

文章目录

组件间通信的概念

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

  • 组件
  • 通信

都知道组件是vue最强大的功能之一,vue中每一个.vue我们都可以视之为一个组件通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的。广义上,任何信息的交通都是通信组件间通信即指组件(.vue)通过某种方式来传递信息以达到某个目的举个栗子我们在使用UI框架中的table组件,可能会往table组件中传入某些数据,这个本质就形成了组件之间的通信

组件间通信的分类

  • 父子组件之间的通信
  • 兄弟组件之间的通信
  • 祖孙与后代组件之间的通信
  • 非关系组件间之间的通信
    在这里插入图片描述

组件间通信的方案

vue中8种常规的通信方案

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

父组件将方法传递给子组件(props)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="vue2.5.16.js"></script>
</head><body><div id="app"><!-- 父组件向子组件 传递 方法,是通过 事件绑定机制; v-on。当我们自定义了 一个 事件属性 parent-show(这个地方不能用驼峰命名)之后,--><!-- 那么,子组件就能够,通过 emit 来调用 传递进去的 这个 方法了 --><!-- 【第一步】。意思是说,`show`是父组件的方法名,`parent-show`是自定义的时间属性,稍后要在子组件中用到 --><component1 @parent-show='show'></component1></div><!-- 定义子组件的模板 --><template id="myTemplate"><!-- 【第二步】按照正常的写法来:点击按钮,调用子组件的方法 --><div @click="childClick">我是子组件,点击调用父组件的方法</div></template><script>// 创建 Vue 实例,得到 ViewModelvar vm = new Vue({el: '#app',data: { //父组件的data// msg: '父组件中的数据'},methods: {show: function () { // 定义父组件的show方法console.log('父组件提供的方法');}},components: {component1: { //将子组件的名称定义为 component1template: '#myTemplate',data() { // 子组件的datareturn {// content: '子组件私有的数据 content'}},props: [''],directives: {},filters: {},components: {},methods: {childClick() {// 当点击子组件的按钮时,如何 拿到 父组件传递过来的 func 方法,并调用这个方法???//  emit 英文原意: 是触发,调用、发射。意思是,触发父组件的方法// 【第三步】 在子组件的方法中,通过 emit 触发父组件的方法this.$emit('parent-show');}}}}});</script>
</body></html>

效果如下:(点击子组件,触发了父组件的方法)
在这里插入图片描述

子组件向父组件传值(emit)

如果要实现子组件向父组件传值,代码是类似的,我们只需要在子组件通过emit触发父组件的方法时,把子组件的参数带出去就可以了

  • 适用场景:子组件传递数据给父组件
  • 子组件通过$emit触发自定义事件,$emit第二个参数为传递的数值
  • 父组件绑定监听器获取到子组件传递过来的参数
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="vue2.5.16.js"></script>
</head><body><div id="app"><component1 @parent-show='show'></component1></div><!-- 定义子组件的模板 --><template id="myTemplate"><h2 @click="childClick">我是子组件,点击调用父组件的方法</h2></template><script>// 创建 Vue 实例,得到 ViewModelvar vm = new Vue({el: '#app',data: { //父组件的data// msg: '父组件中的数据'},methods: { // 定义父组件的方法show: function (arg1, arg2) { //【第二步】父组件里放两个参数,这个两个参数就代表着子组件中的`child 123`、`child 789`console.log('父组件提供的方法');console.log('打印子组件传递过来的参数。参数一:' + arg1 + ',参数二:'+ arg2);}},components: {component1: { //将子组件的名称定义为 component1template: '#myTemplate',data() { // 子组件的datareturn {// content: '子组件私有的数据 content'}},props: [''],directives: {},filters: {},components: {},methods: {childClick() {// 子组件如果要给父组件传递参数,在触发 emit 的时候,通过参数的形式带出去就可以了// 【第一步】在子组件里,我们带两个参数出去,传给父组件this.$emit('parent-show', 'child 123', 'child 789');}}}}});</script>
</body></html>

运行结果:(点击<h2>之后)
在这里插入图片描述
Chilfen.vue

this.$emit('add', good)  

Father.vue

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

通过 ref 属性获取DOM元素

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

父组件

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

EventBus

  • 使用场景:兄弟组件传值
  • 创建一个中央事件总线EventBus
  • 兄弟组件通过$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)  

p a r e n t 或 parent 或 parent root

  • 通过共同祖辈$parent或者$root搭建通信桥连

兄弟组件

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

另一个兄弟组件

this.$parent.emit('add')

a t t r s 与 attrs 与 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的基础上进行。常用来做一些异步操作

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

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

相关文章

Kotlin编程权威指南学习知识点预览

一、变量、常量和类型&#xff1a; 变量、常量以及 Kotlin 基本数据类型。变量和常量在 应用程序中可用来储值和传递数据。类型则用来描述常量或变量中保存的是什么样的数据。 1、声明变量: // 变量定义关键字 —— 变量名 —— 类型定义 —— 赋值运算符 —— 赋值var na…

cesium wall 扩散墙(动态立体墙效果 Primitive 方法)

cesium wall 扩散墙(动态立体墙效果)以下为源码直接复制可用 1、实现思路 1、此效果运用cesium 中 Primitive 方法,通过传入中心点、半径、顶点数、颜色来进行加载。 2、运用 Math 方法 对传进来的中心点、半径、定点数,来计算个顶点经纬度。 3、通过Primitive 方法中upda…

643.子数组最大平均数

题目&#xff1a;给你一个由 n 个元素组成的整数数组 nums 和一个整数k。 找出平均数最大且长度为 k 的连续子数组&#xff0c;并输出该最大平均数。 任何误差小于10^-5 的答案都将被视为正确答案。 解题思路&#xff1a;规定了子数组的长度为k&#xff0c;因此可以通过寻找子…

洛谷——P1352 没有上司的舞会

题目描述 某大学有 n 个职员&#xff0c;编号为1…n。 他们之间有从属关系&#xff0c;也就是说他们的关系就像一棵以校长为根的树&#xff0c;父结点就是子结点的直接上司。 现在有个周年庆宴会&#xff0c;宴会每邀请来一个职员都会增加一定的快乐指数 ri​&#xff0c;但…

【MySQL】深入解析索引实现原理

文章目录 1、索引介绍2、索引分类2.1、数据结构HashB Tree 2.2、存储方式聚簇索引非聚簇索引 2.3、功能特性主键索引唯一索引普通索引 2.4、字段数量单列索引多列索引 3、最佳实践3.1、索引覆盖3.2、回表操作3.3、最左匹配原则3.4、索引下推 1、索引介绍 对于MySQL数据库来说…

笔试题:小红的循环小数 数论 欧拉 快速幂 小费马定理

小红的循环小数 众所周知&#xff0c;所有的无限循环小数都可以写成分数的形式 小红想让你判断循环节长度为k的无限循环小数的分母是否可能是p。你能帮帮她吗&#xff1f; 共有q次询问。 输入描述 第一行输入一个正整数 q q q&#xff0c;代表询问次数。 接下来的 q q q行&…

Tensorflow笔记(二):常用函数2、激活函数、优化器等、神经网络模型实现(商品销量预测)

import tensorflow as tf import numpy as np from tqdm import tqdm# ----------------------------- tensor常用函数2 ----------------------------------- a tf.constant([1, 2, 3, 1, 2]) b tf.constant([0, 1, 3, 4, 5]) c tf.where(tf.greater(a, b), a, b) # 若a&g…

计算机毕业设计-springboot+vue前后端分离电竞社交平台管理系统部分成果分享

4.5系统结构设计 本系统使用的角色主要有系统管理员、顾客、接单员&#xff0c;本系统为后台管理系统&#xff0c;游客用户可以经过账号注册&#xff0c;管理员审核通过后&#xff0c;用账号密码登录系统&#xff0c;查看后台首页&#xff0c;模块管理&#xff08;顾客信息&am…

mysql重构

力扣题目链接 列转行 SELECT product_id, store1 store, store1 price FROM products WHERE store1 IS NOT NULL UNION SELECT product_id, store2 store, store2 price FROM products WHERE store2 IS NOT NULL UNION SELECT product_id, store3 store, store3 price FROM p…

全栈的自我修养 ———— js中的复制api

通常用于可以禁止用户复制或者在复制的内容后面添加版权信息等 一、代码二、展示1、访问粘贴板的内容2、替换复制内容3、在复制内容的后面添加版权信息4、监听粘贴事件 一、代码 <body><div class"demo">不可以被复制</div><div class"de…

如何从任何文档生成指令数据集以进行LLM微调

使用轻量级库经济地生成高质量的合成数据集 大型语言模型 &#xff08;LLMs&#xff09; 是功能强大的通用工具&#xff0c;但它们通常缺乏特定于领域的知识&#xff0c;这些知识通常存储在企业存储库中。 使用您自己的数据微调自定义LLM可以弥合这一差距&#xff0c;而数据准…

【Shiro反序列化漏洞】Shiro-550反序列化漏洞复现

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java、PHP】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收…

了解下索引的几棵树?

二叉树 二叉搜索树最好的情况性能是O(logn)&#xff0c;最坏情况是O(n) 红黑树 它的时间复杂度是O(logn)&#xff0c;但是在数据量特别大的时候&#xff0c;树会特别高&#xff0c;就会遍历很多层级&#xff0c;对性能影响较大 BTree B树是一种多叉路衡查找树&#xff0c;相对于…

解决NVM安装Node失败:淘宝NPM镜像HTTPS证书到期及源切换指南

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

如果利用AOP/Aspect来修改方法的入参

问题描述&#xff1a; 最近项目代码过三方测试&#xff08;国企项目&#xff09;&#xff0c;在一系列代码扫描审计检查下&#xff0c;代码发现一部分修改&#xff0c;例如请求参数发生了编码/加密&#xff0c;导致后台需要对请求的参数进行解码/解密&#xff0c;后端那么接口&…

访问者模式(Visitor Pattern)

访问者模式 说明 访问者模式&#xff08;Visitor Pattern&#xff09;属于行为型模式&#xff0c;表示一个作用于某对象结构中的各元素的操作。它使你可以在不改变各元素的类的前提下定义作用于这些元素的新操作。 该模式是将数据结构与数据操作分离的设计模式&#xff0c;是…

Flutter 多语言、主题切换之GetX库

多语言、主题切换之GetX库 前言正文一、配置项目二、模拟UI三、语言配置① 常量键② 语言配置文件③ 配置 四、持久化五、切换语言① my_home.dart② home.dart③ mine_controller.dart④ language_setting_controller.dart⑤ language_setting.dart⑥ mine.dart 六、切换主题①…

基于SpringBoot的“家政服务管理平台”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“家政服务管理平台”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统首页界面图 用户注册界面图 服务信息界面…

WorldGPT、Pix2Pix-OnTheFly、StyleDyRF、ManiGaussian、Face SR

本文首发于公众号&#xff1a;机器感知 WorldGPT、Pix2Pix-OnTheFly、StyleDyRF、ManiGaussian、Face SR HandGCAT: Occlusion-Robust 3D Hand Mesh Reconstruction from Monocular Images We propose a robust and accurate method for reconstructing 3D hand mesh from m…

ConnectionResetError: [WinError 10054] 远程主机强迫关闭了一个现有的连接。

发生的错误信息&#xff1a; File "C:\Users\malongqiang\.conda\envs\ObjectDetection\lib\ssl.py", line 1309, in do_handshakeself._sslobj.do_handshake() ConnectionResetError: [WinError 10054] 远程主机强迫关闭了一个现有的连接。 分析原因&#xff1a; …