位置: IT常识 - 正文

vue3 组件间互相通信(包括父子、爷孙、兄弟、全局)(vue组件相互引入)

编辑:rootadmin
vue3 组件间互相通信(包括父子、爷孙、兄弟、全局)

目录

父子互相通信

proprs / emits

使用 props(父传子), 使用emit(子传父)

v-model / emits(父子互相通信))

仅父传子通信

ref方式

仅父传更深的后代(仅爷传孙通信)

provide / inject(组件内api)

provide / inject响应性数据的传递与接收

兄弟组件通信

全局组件通信

EventBus(通常被称之为 “全局事件总线”)

Vuex(后续文章详解)


父子互相通信proprs / emitsFather.vue 通过 prop 向 Child.vue 传值(可包含父级定义好的函数)Child.vue 通过 emit 向 Father.vue 触发父组件的事件执行使用 props(父传子), 使用emit(子传父)

推荐整理分享vue3 组件间互相通信(包括父子、爷孙、兄弟、全局)(vue组件相互引入),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue组件相互引入,vue组件之间传递数据,vue组件互相嵌套,vue组件之间互相调用方法,vue中组件之间如何通信,vue组件之间的交互,vue组件相互引入,vue中组件之间如何通信,内容如对您有帮助,希望把文章链接给更多的朋友!

父组件:

<template> // 通过v-bind将数据想子组件传递 // 动态绑定 props 是用 :,绑定 emit 是用 @ <VChild :value="valueData" @update-age="updateAge" /></template>const valueData = 'type'

子组件:

export default defineComponent({ props: { value: String, }, // 在 2.x ,只需要通过 this.uid、this.userName 就可以使用父组件传下来的 prop 。 // 但是 3.x 没有了 this, 需要给 setup 添加一个入参才可以去操作。 setup (props, ctx) { // 该入参包含了我们定义的所有props console.log(props); // 调用 emits ctx.emit('update-age', value) }})

TIP:

prop 是只读,不允许修改setup 的第一个入参,包含了我们定义的所有props(如果在 Child.vue 里未定义,但 父组件 Father.vue 那边非要传过来的,不会拿到,且控制台会有警告信息)该入参可以随意命名,比如你可以写成一个下划线 _,通过 _.uid 也可以拿到数据,但是语义化命名,是一个良好的编程习惯。v-model / emits(父子互相通信))

通过Vue3的文档可以发现,这个指令的用法发生了一定的变化。在之前,我们要想实现一个自定义的非表单组件的双向绑定,需要通过xxxx.sync的这种语法来实现,如今这个指令已经被废除了,而是统一使用v-model这个指令。

父组件:支持多个数据的双向绑定

<template> <VChild v-model:value="valueData" v-model:keyword="keywordData" /></template>

子组件:

<template> <button @click="clickHandle">click</button></template>export default defineComponent({ name: 'child', props: { value: String, keyword: String }, setup(props, ctx) { // 用户点击按钮 const clickHandle = (e: any) => { // 修改对应的props的数据,直接通过 “update:属性名” 的格式,直接定义一个更新事件 ctx.emit('update:value', value) ctx.emit('update:keyword', value + '123') } }})

TIP:

虽然 v-model 的配置和 prop 相似,但是为什么出这么两个相似的东西?自然是为了简化一些开发上的操作。

使用 props / emits,如果要更新父组件的数据,还需要在父组件定义好方法,然后 return 给 template 去绑定事件给子组件,才能够更新。

而使用 v-model / emits ,无需如此,可以在 Child.vue 直接通过 “update:属性名” 的格式,直接定义一个更新事件。

仅父传子通信

父组件向子组件传递一个数据,可以用这两种方式:

v-bind (上面父子通信中得prop)refs获取子组件内部某个函数,直接调用传参(这里简称refs方式)ref方式

父组件:

<template> <div>sonRef</div> <button @click="sendValue">send</button> // 这里ref接受的字符串,要setup返回的ref类型的变量同名 <Son ref="sonRef" /></template><script lang="ts">import { defineComponent, ref } from 'vue'import Son from '@/components/Son.vue'export default defineComponent({ name: 'Demo', components: { Son }, setup() { // 如果ref初始值是一个空,可以用于接受一个实例 // vue3中获取实例的方式和vue2略有不同 const sonRef: any = ref(null) // 请保证视图渲染完毕后再执行操作 onMounted( () => { // 可以拿到son组件实例,并调用其setup返回的所有信息 console.log(sonRef.value) // 通过调用子组件实例的方法,向其传递数据 sonRef.value.acceptValue('123456') // 也可以去操作子组件的数据 sonRef.value.valueRef = '8888'; }); // 必须return出去才可以给到template使用 return { sonRef, } }})</script>

子组件:

<template> // 渲染从父级接受到的值 <div>Son: {{ valueRef }}</div></template><script lang="ts">import { defineComponent, ref } from 'vue'export default defineComponent({ name: 'Son', setup() { const valueRef = ref('') // 该函数可以接受父级传递一个参数,并修改valueRef的值 const acceptValue = (value: string) => (valueRef.value = value) return { acceptValue, valueRef } }})</script>

TIP:

这种方式跟Vue2中使用this.$refs,this.$children的方式很相似,都是通过拿到子组件实例,直接调用子组件身上的函数。方法千篇一律,不过在Vue3中没有了this这个黑盒。

仅父传更深的后代(仅爷传孙通信)provide / inject(组件内api)vue3 组件间互相通信(包括父子、爷孙、兄弟、全局)(vue组件相互引入)

这个特性有两个部分:Grandfather.vue 有一个 provide 选项来提供数据,Grandson.vue 有一个 inject 选项来开始使用这些数据。

Grandfather.vue 通过 provide 向 Grandson.vue 传值(可包含定义好的函数)Grandson.vue 通过 inject 向 Grandfather.vue 触发爷爷组件的事件执行

无论组件层次结构有多深,发起 provide 的组件都可以作为其所有下级组件的依赖提供者。

爷组件:

<template> <Grandfather> <father></father> </Grandfather></template><script lang="ts">// 记得导入provideimport { defineComponent, provide } from 'vue'export default defineComponent({ name: 'Grandfather', setup(props) { // 定义好数据 const msgData: string = 'Hello World!'; // 向后代provide出去数据 provide(msg, msgData) return {} }})</script>

TIP:

在 3.x,provide需要导入并在setup里启用,并且现在是一个全新的方法。

每次要provide一个数据的时候,就要单独调用一次。

孙组件:

<script lang="ts">// 记得导入injectimport { defineComponent, reactive, inject } from 'vue'export default defineComponent({ name: 'Grandson', setup () { const msg: string = inject('msg') || ''; }})</script>provide / inject响应性数据的传递与接收

provide 和 inject 本身不可响应,但是并非完全不能够拿到响应的结果,只需要我们传入的数据具备响应性,它依然能够提供响应支持。

我们以 ref 和 reactive 为例,来看看应该怎么发起 provide 和接收 inject。

对这 2 个 API 还不熟悉的同学,建议先阅读一下 响应式性基础 。

爷组件:

export default defineComponent({ // ... setup () { // provide一个ref const msg = ref<string>('Hello World!'); provide('msg', msg); // provide一个reactive const userInfo: Member = reactive({ id: 1, name: 'Petter' }); provide('userInfo', userInfo); // 2s 后更新数据 setTimeout(() => { // 修改消息内容 msg.value = 'Hi World!'; // 修改用户名 userInfo.name = 'Tom'; }, 2000); }})

孙组件:

export default defineComponent({ setup () { // 获取数据 const msg = inject('msg'); const userInfo = inject('userInfo'); // 打印刚刚拿到的数据 console.log(msg); console.log(userInfo); // 因为 2s 后数据会变,我们 3s 后再看下,可以争取拿到新的数据 setTimeout(() => { console.log(msg); console.log(userInfo); }, 3000); // 响应式数据还可以直接给 template 使用,会实时更新 return { msg, userInfo } }})

provide / inject引用类型的传递与接收

TIP:

组件内的provide / inject 区分于应用配置内的应用API——provide。(以后文章详细讲解)

兄弟组件通信

兄弟组件是指两个组件都挂载在同一个 Father.vue 下,但两个组件之间并没有什么直接的关联。如果想要交流:

先把数据传给共同的Father.vue,再通过父子组件通信去交流;(难用,不推荐)使用下面的全局组件通信。(√)全局组件通信

全局组件通信是指,两个任意的组件,不管是否有关联(父子、爷孙、兄弟)的组件,都可以直接进行交流的通信方案。

EventBus(通常被称之为 “全局事件总线”)

Vue 3.x 移除了 $on 、 $off 和 $once 这几个事件 API,使得vue3.x不能像2.x一样,不能直接使用EventBus。

Vuex(后续文章详解)

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

本文链接地址:https://www.jiuchutong.com/zhishi/276109.html 转载请保留说明!

上一篇:如何在Windows11中连接和管理蓝牙设备?(如何在windows11中安装google play)

下一篇:什么是bashMAC OS手动升级Bash的方法(什么是suv汽车)

  • 关于推广个人博客的经验 (推广博文)

    关于推广个人博客的经验 (推广博文)

  • ps怎么把矩形圆弧变成直角(ps怎么把矩形圆角参数)

    ps怎么把矩形圆弧变成直角(ps怎么把矩形圆角参数)

  • vivox6s A微信视频美颜怎么设置(vivo手机微信视频没反应)

    vivox6s A微信视频美颜怎么设置(vivo手机微信视频没反应)

  • 抖音隐藏作品在哪里(抖音隐藏作品在哪里我怎么看不到)

    抖音隐藏作品在哪里(抖音隐藏作品在哪里我怎么看不到)

  • 苹果x录像功能没了(iphone x录像在哪)

    苹果x录像功能没了(iphone x录像在哪)

  • 快手直播人脸验证技巧(快手直播人脸验证不是本人)

    快手直播人脸验证技巧(快手直播人脸验证不是本人)

  • 微信怎么查不了2017年账单(微信怎么查不了账单明细)

    微信怎么查不了2017年账单(微信怎么查不了账单明细)

  • iphone11卡贴怎么装(苹果11卡贴怎么贴)

    iphone11卡贴怎么装(苹果11卡贴怎么贴)

  • 抖音小店开通条件(抖音小店开通条件及保证金)

    抖音小店开通条件(抖音小店开通条件及保证金)

  • 苹果手机微信发不了语音(苹果手机微信发不出去消息怎么回事)

    苹果手机微信发不了语音(苹果手机微信发不出去消息怎么回事)

  • 联想小新14休眠怎么唤醒屏幕(联想小新14休眠快捷键)

    联想小新14休眠怎么唤醒屏幕(联想小新14休眠快捷键)

  • 阻止此来电号码对方会听到什么(阻止此来电号码能收到短信吗)

    阻止此来电号码对方会听到什么(阻止此来电号码能收到短信吗)

  • nxtdl00是什么型号

    nxtdl00是什么型号

  • qq照片回收站多久过期(qq照片回收站2020)

    qq照片回收站多久过期(qq照片回收站2020)

  • 误触光猫wps按键(移动光猫按了wps键就没网了)

    误触光猫wps按键(移动光猫按了wps键就没网了)

  • ppt未响应还没保存怎么办(ppt一直未响应怎么保存)

    ppt未响应还没保存怎么办(ppt一直未响应怎么保存)

  • 您所拨打的号码已过期是什么意思(您所拨打的号码暂无法接通将以短信通知机主)

    您所拨打的号码已过期是什么意思(您所拨打的号码暂无法接通将以短信通知机主)

  • cad面域快捷键(cad相似选择快捷键)

    cad面域快捷键(cad相似选择快捷键)

  • 华为m6可以插手机卡吗(华为m6能插sd卡吗)

    华为m6可以插手机卡吗(华为m6能插sd卡吗)

  • 唱吧可以投屏到电视上吗(唱吧可以投屏到电视上声音)

    唱吧可以投屏到电视上吗(唱吧可以投屏到电视上声音)

  • 微信拉黑名单和删除有区别吗(微信拉黑名单和拉黑名单又删除有什么区别)

    微信拉黑名单和删除有区别吗(微信拉黑名单和拉黑名单又删除有什么区别)

  • iwatch只能和苹果手机配对吗(apple watch只能连iphone)

    iwatch只能和苹果手机配对吗(apple watch只能连iphone)

  • 信号满格网速太慢是什么原因(信号满格网速太慢怎么解决)

    信号满格网速太慢是什么原因(信号满格网速太慢怎么解决)

  • 微软1724什么配置(微软笔记本1724是哪个型号)

    微软1724什么配置(微软笔记本1724是哪个型号)

  • 快手怎么查看浏览记录(快手怎么查看浏览过的直播间)

    快手怎么查看浏览记录(快手怎么查看浏览过的直播间)

  • airpods会发光吗(airpods会不会发光)

    airpods会发光吗(airpods会不会发光)

  • iphone系统50g怎么清理(iphone系统占50g内存)

    iphone系统50g怎么清理(iphone系统占50g内存)

  • 怎么把电量变成七彩的(怎么把电量变成图案)

    怎么把电量变成七彩的(怎么把电量变成图案)

  • 京东白条分期利息是多少(京东白条分期利息是先扣除吗)

    京东白条分期利息是多少(京东白条分期利息是先扣除吗)

  • win10电脑记事本在哪(win10电脑记事本打不开显示错误)

    win10电脑记事本在哪(win10电脑记事本打不开显示错误)

  • 另一种解决Failed to execute goal on project xxx: Could not resolve dependencies for project com的方法(另一种答案)

    另一种解决Failed to execute goal on project xxx: Could not resolve dependencies for project com的方法(另一种答案)

  • 2023年享受六税两费减免吗
  • 小规模纳税人如何计算增值税
  • 企业交的增值税怎么做账
  • 增值税销项税额账务处理
  • 不确认销售收入结转销售成本
  • 工程施工企业收入和成本需不需要设置按项目核算
  • 资产负债表中本期盈余等于什么?
  • 申报个税大病医疗如何申报
  • 核定征收企业怎么申报
  • 注册资本金应该编入政府性基金预算吗
  • 财政拨款进项税怎么处理
  • 装修费属于劳务费吗
  • 电子汇票如何使用
  • 购买债券投资的交易费用
  • 微信收付款认证
  • 银行承兑汇票到期后多长时间失效
  • 出口退税系统中的出口货物已补税未退税证明怎么填
  • 超市收代金券如何处理
  • 加速折旧以后年度如何填报调减额
  • 华为鸿蒙系统怎么降级版本
  • 应如何做会计分录表
  • 入账价值是啥
  • 会计科目对应的会计要素
  • 鸿蒙系统公测版和beta版有什么区别
  • 锁定任务栏不管用
  • 销售预售卡如何入账
  • windows11怎么设置锁屏密码
  • php魔术方法的讲解与使用
  • 亏损销售怎么结转库存成本怎么计算
  • 社保通过银行缴纳
  • composer安装不知道这样的主机
  • 移民美国怎样加入医疗保险
  • php判断字符串是否存在
  • 符合资本化的研发支出不影响利润总额吗
  • 阿罗内镇的村落叫什么
  • php设置header参数
  • vue的slice
  • 非税收入定额票据可以报销吗去什么地方报销
  • 小规模季报附加税怎么报
  • 如何计提增值税销项税额
  • 开办费计入哪个会计科目
  • SQL SERVER 2008 64位系统无法导入ACCESS/EXCEL怎么办
  • mysql备份原理
  • SQL Server 跨库同步数据
  • 公章变更需要到哪个部门
  • 发票开错对方已抵扣该怎么处理?
  • 金税盘怎么向分盘分配发票
  • 增值税买票卖票
  • 公户直接转给私人账户违法么
  • 个贷系统平账专户怎么做分录
  • 员工借款的定义
  • 伙食堂是什么意思
  • etc的充值发票可以报账吗
  • 常用的加速折旧方法
  • 一般纳税人纳税申报表
  • 现金退回没原始凭证咋办
  • 应收的借方和应付的贷方相等
  • 卸车费属于什么费用类别
  • 其他收益和其他综合收益属于什么科目
  • 生产型企业年终奖发放方案
  • sqlyog存储过程
  • windows xp操作
  • vmware左侧的虚拟机名称不见了
  • win1020h2正式版
  • .mcp是什么文件
  • linux+c
  • linux计划任务执行脚本
  • opengl导入obj
  • 我今天抽6
  • 在布局中使用选定的比例
  • ip地址一键切换
  • Python 专题四 文件基础知识
  • js代码怎么使用
  • 国家税务总局江西省国家税务局
  • 一般纳税人取得苗木普票可以抵扣吗
  • 查账征收个人经营所得税怎么申报
  • 厦门增值税发票查验
  • 增值税普通发票有什么用
  • 上海税务培训中心
  • 福斯特会计软件下载
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设