【Vue3组件间通信理解】

Vue3组件通信方式

  • 方式一:props
  • 方式二:自定义事件
  • 方式三:mitt
  • 方式四:v-model
  • 方式五:$attrs
  • 方式六:refs, parent
  • 方式七:provide, inject

总结来源于 尚硅谷vue3
大部分实现双向通信都是向子组件传递一个函数,在函数中修改。总结写在前头:

  • 任意间组件通信: mitt
  • 若想实现父子间双向通信
    • props
    • v-model
    • provide, inject
    • refs, parent组合使用,不如上面的方便
  • 若实现单向通信
    • 子到父
      • 自定义事件
      • parent
    • 父到子
      • refs
    • 祖-> 孙
      • provide, inject
      • $attrs, 需要父组件参与且父组件一旦获取某个值,一般情况下子组件不能通过这种方式再获取了

方式一:props

Props可以实现 父->子, 子->父

  • 父传子:属性值是非函数
  • 子传父:属性值是函数

使用到的红函数: defineProps([‘xx’])

方式二:自定义事件

可以实现子传父

  1. 注意区分好:原生事件、自定义事件。
  • 原生事件:
    • 事件名是特定的(clickmouseenter等等)
    • 事件对象$event: 是包含事件相关信息的对象(pageXpageYtargetkeyCode
  • 自定义事件:
    • 事件名是任意名称
    • 事件对象$event: 是调用emit时所提供的数据,可以是任意类型!!!

demo
<Child @xxx = “function / 表达式”/>
这里相当于在Child组件上绑定了一个事件xxx,子组件可以通过:
const emits = defineEmits(['xx'])获取自定的事件.然后 emits('xx', 相关数据)将数据传到回调函数function中

方式三:mitt

可以实现任意组件间的通信

可以理解成一个第三方自定义事件仓库(自己向里面放)

  1. 下载mitt,打开终端(vscode中按ctrl + ~), npm i mitt
  2. 在src文件下载新建工具包utils, 新建emitter.ts文件
  3. 创建mitt
// 引入mitt 
import mitt from "mitt";// 创建emitter
const emitter = mitt()// 创建并暴露mitt
export default emitter
  1. 使用
// 绑定事件
emitter.on('send-toy',(value)=>{console.log('send-toy事件被触发',value)
})onUnmounted(()=>{// 解绑事件emitter.off('send-toy')
})// 需要传数据的vue文件中写如下代码
function sendToy(){// 触发事件emitter.emit('send-toy',toy.value)
}

Notice:记得在组件销毁前解绑相关事件

方式四:v-model

v-model放在组件标签上也可以时间父子间双向通信,一般组件库常用这种方法

<!--
子组件是一个自定义的input组件,里面放着自己写的input结构和样式
-->
<Child v-model="username"/><!-- 上面情况等价于 -->
<Child :username="username" 
@update:modelValue="username=$emit" />

Chile.vue

<template><div class="box"><!--将接收的value值赋给input元素的value属性,目的是:为了呈现数据 --><!--给input元素绑定原生input事件,触发input事件时,进而触发update:model-value事件--><input type="text" :value="modelValue" @input="emit('update:model-value',$event.target.value)"></div>
</template><script setup lang="ts" name="AtguiguInput">// 接收propsdefineProps(['modelValue'])// 声明事件const emit = defineEmits(['update:model-value'])
</script>

如果不想使用modelValue这个标识符,可以这样:v-model:xx,这里的xx就代替了modelValue, 这种情况下你可以传递多个值

方式五:$attrs

实现 祖->孙 数据传递
本质上就是祖->父, 父->子,只不过这个过程父亲不能接受数据


v-bind="{x:100,y:200} === :x=“100” :y=“200”

<template><div class="father"><h3>父组件</h3><Child :a="a" :b="b" :c="c" :d="d" v-bind="{x:100,y:200}" :updateA="updateA"/></div>
</template>

<h3>子组件</h3>
<!-- 祖传的数据父亲不用,都存在$attrs上了,可以借助vue开发者工具查看 -->
<GrandChild v-bind="$attrs"/>

<template><div class="grand-child"><h3>孙组件</h3><h4>a:{{ a }}</h4><h4>b:{{ b }}</h4><h4>c:{{ c }}</h4><h4>d:{{ d }}</h4><h4>x:{{ x }}</h4><h4>y:{{ y }}</h4><button @click="updateA(666)">点我更新A</button></div>
</template><script setup lang="ts" name="GrandChild">defineProps(['a','b','c','d','x','y','updateA'])
</script>

方式六:refs, parent

可以实现父子间通信

  • $refs获取所有ref标识的子组件的信息(包括数据),前提是子组件通过defineExpose将数据暴露出去
  • $parent获取当前组件的所有父组件的信息(包括数据),前提是父组件通过defineExpose将数据暴露出去
$refs值为对象,包含所有被ref属性标识的DOM元素或组件实例。
$parent值为对象,当前组件的父组件实例对象。

方式七:provide, inject

实现祖<->孙间通信

  • 不需要经过父组件的插手
  • 在祖先组件中通过provide配置向后代组件(不一定只是孙, 父,曾孙等都可以)提供数据
  • 在后代组件中通过inject配置来声明接收数据

<template><div class="father"><h3>父组件</h3><h4>资产:{{ money }}</h4><h4>汽车:{{ car }}</h4><button @click="money += 1">资产+1</button><button @click="car.price += 1">汽车价格+1</button><Child/></div>
</template><script setup lang="ts" name="Father">import Child from './Child.vue'import { ref,reactive,provide } from "vue";// 数据let money = ref(100)let car = reactive({brand:'奔驰',price:100})// 用于更新money的方法function updateMoney(value:number){money.value += value}// 提供数据provide('moneyContext',{money,updateMoney})provide('car',car)
</script>


注意:孙组件在接受的时候需要额外设置默认值,不然ts会警告

<template><div class="grand-child"><h3>我是孙组件</h3><h4>资产:{{ money }}</h4><h4>汽车:{{ car }}</h4><button @click="updateMoney(6)">点我</button></div>
</template><script setup lang="ts" name="GrandChild">import { inject } from 'vue';// 注入数据let {money,updateMoney} = inject('moneyContext',{money:0,updateMoney:(x:number)=>{}})let car = inject('car')
</script>

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

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

相关文章

Vue3+TS+ElementPlus的安装和使用教程【详细讲解】

前言 本文简单的介绍一下vue3框架的搭建和有关vue3技术栈的使用。通过本文学习我们可以自己独立搭建一个简单项目和vue3的实战。 随着前端的日月更新&#xff0c;技术的不断迭代提高&#xff0c;如今新vue项目首选用vue3 typescript vite pinia……模式。以前我们通常使用…

webpack知识点总结(高级应用篇)

除开公共基础配置之外&#xff0c;我们意识到两点: 1. 开发环境(modedevelopment),追求强大的开发功能和效率&#xff0c;配置各种方便开 发的功能;2. 生产环境(modeproduction),追求更小更轻量的bundle(即打包产物); 而所谓高级应用&#xff0c;实际上就是进行 Webpack 优化…

计算机组成原理-期末复习

目录 第一章——计算机系统概述 一、数字计算机的主要组成结构 二、指令的形式 三、控制器的基本任务 四、指令流和数据流 五、适配器与输入/输出设备 七、计算机的系统软件 八、C 语言的转换层次图 九、计算机系统的层次结构图 第二章——运算方法和运算器 一、 数据格式…

vue-quill-editor 清除黏贴的文本自带样式,且只允许黏贴文本

在module的粘贴板里添加一个匹配器 modules: {toolbar: false,clipboard: {// 粘贴过滤matchers: [[Node.ELEMENT_NODE, this.HandleCustomMatcher]]// [img, this.HandleCustomMatcher2]},},let ops []Delta.ops.forEach(op > {if (op.insert && typeof op.insert…

javascript之跳转页面的几种方法?

文章目录 前言代码演示及解释使用location.href属性使用location.assign()方法使用location.replace()方法使用window.open()方法使用document.URL方法 总结 前言 本章学习的是JavaScript中的跳转页面的几种方法 代码演示及解释 使用location.href属性 可以直接将一个新的URL…

企业如何做好客户管理?有哪些关键因素?

客户管理是建立和维护客户关系的重要组成部分&#xff0c;对于企业的发展至关重要。下面就让我们来看看在做好客户管理时有哪些关键因素吧。 第一个关键因素是提供优质的客户服务。无论是线上还是线下&#xff0c;当客户需要帮助时&#xff0c;他们希望能够得到有效且及时的支持…

sqlserver根据分组的内容分别查询出匹配的一条信息

需求场景&#xff1a; 我写了条分组语句&#xff0c; select name from car_machine_command group by name 然后该表有很多条相关的数据&#xff0c;我只想拿各个分组的一条数据看看即可 解决&#xff1a;可以使用窗口函数&#xff08;Window Function&#xff09;和 ROW_NU…

Dora-rs 机器人框架学习教程(1)—— Dora-rs安装

1、dora简介 Dora-rs[1] 是一个基于 Rust 实现的化机器人框架&#xff0c;其具有极高的实时性能。Dora-rs使用Rust语言做数据流的传输和调度管理&#xff0c;可以大大减少了数据的重复拷贝和传输。它提供了Rust语言和Python语言之间的无缝集成&#xff0c;减少了跨语言的性能代…

阿里云服务器Valheim端口2456、2457和2458放行设置

使用阿里云服务器搭建Valheim英灵神殿需要开启2456-2458端口&#xff0c;阿里云服务器默认只开放了22核3389端口&#xff0c;开通2456端口是在安全组中配置的&#xff0c;阿里云服务器网aliyunfuwuqi.com来详细说下阿里云服务器安全组开通端口流程&#xff1a; 阿里云服务器安…

中国供应链,出海大时代

尽量优化、打通跨境电商每一个参与方的物流、商流、信息流、资金流是电商供应链出海的解题之法。这个过程中数智化便是打通这些节点的钥匙。 作者|斗斗 编辑|皮爷 出品|产业家 “速卖通加持&#xff0c;阿里国际零售商业收入同比上涨73%”“拼多多发布Q3财报同比增长94%…

7. 解决赋值的问题

388 // assignment operator invoked // object assigned to itself // all done // free old string // get space for new string CPrimer Plus(第五版)中文版 StringBad headline1 ("Celery Stalks at Midnight") : StringBad knot: knot - headlinel: 初始…

基于Java SSM框架实现中国古诗词学习平台项目【项目源码】

基于java的SSM框架实现中国古诗词学习平台系统演示 JSP技术介绍 JSP技术本身是一种脚本语言&#xff0c;但它的功能是十分强大的&#xff0c;因为它可以使用所有的JAVA类。当它与JavaBeans 类进行结合时&#xff0c;它可以使显示逻辑和内容分开&#xff0c;这就极大的方便了用…

Sam Altman的一天被曝光!每天15小时禁食、服用小剂量安眠药,尽可能避免开会

Sam Altman在经历了几天混乱的管理重组后&#xff0c;重新回到了OpenAI的CEO位置。在日常生活中&#xff0c;奥特曼与许多科技行业高管一样&#xff0c;痴迷于延长自己的寿命。 据报道&#xff0c;他还为应对末日场景&#xff08;致命合成病毒的释放、核战争和人工智能攻击等&…

P59 生成式对抗网络GAN-理论介绍 Theory behind GAN

Object Normal Distribution 的数据 经过 Generator 后生成分布更加复杂的PG. 真实数据的分布为 Pdata , 希望 PG和Pdata 越近越好 LOSS 是 两者之间的分布距离 问题: 如何计算 divergence? Sampling is goog enough Discriminator 希望V越大越好 y~Pdata 代表从 Pdata里…

Vue3 watch 的使用,如何监听一个对象中的属性值的变化 vue3 + ts + vite

Vue3 watch 的使用&#xff0c;如何监听一个对象中的属性值的变化 由 vue2 转到 vue3 ts vite 之后都不会写这些玩意了。搜了下&#xff0c;找到了答案&#xff1a; vue2 的 watch <script>export default {watch: {$route.query.id(newValue){// 可以这样监听路由的…

vue 实现拐弯时间线,弯曲时间线,弯曲任务步骤条

需求&#xff1a; 实现可拐弯的步骤条功能 实现后效果如下&#xff1a; 代码部分&#xff1a; 创建步骤条组件Steps.vue <template><div><divstyle"width: 100%; display: flex; position: relative; margin-top: 20px"><div style"wi…

为什么大学c语言课不顺便教一下Linux,Makefile

为什么大学c语言课不顺便教一下Linux&#xff0c;Makefile&#xff0c;git&#xff0c;gdb等配套工具链呢? 在开始前我有一些资料&#xff0c;是我根据自己从业十年经验&#xff0c;熬夜搞了几个通宵&#xff0c;精心整理了一份「Linux的资料从专业入门到高级教程工具包」&…

FreeRTOS学习笔记

前言 本笔记基于B站正点原子的视频讲解&#xff0c;和个人的理解应用情况。应该适合用来回忆复习FreeRTOS的基本内容&#xff0c;避免在应用时突然忘了某个知识点要查很久。还有就是B站正点原子的讲解视频主要是对FreeRTOS的移植应用讲解&#xff0c;而我重点只听应用部分&…

平方根,又叫二次方根,表示为〔√ ̄〕

正在加载中... 平方根&#xff0c;又叫二次方根&#xff0c;表示为〔√&#xffe3;〕&#xff0c;如&#xff1a; 平方根&#xff0c;又叫二次方根&#xff0c;表示为〔√&#xffe3;〕&#xff0c;如&#xff1a;数学语言为&#xff1a;√&#xffe3;164。语言描述为&…

五、Spring AOP面向切面编程(基于注解方式实现和细节)

本章概要 Spring AOP底层技术组成初步实现获取通知细节信息切点表达式语法重用&#xff08;提取&#xff09;切点表达式环绕通知切面优先级设置CGLib动态代理生效注解实现小结 5.5.1 Spring AOP 底层技术组成 动态代理&#xff08;InvocationHandler&#xff09;&#xff1a;…