位置: IT常识 - 正文

Vue3父子组件间传参通信(vue父组件子组件)

编辑:rootadmin
Vue3父子组件间传参通信 Vue3 父子组件间通信前言一、父传子 defineProps二、子传父 defineEmits三、子组件暴露属性给父组件 defineExpose四、依赖注入Provide / Inject参考前言

推荐整理分享Vue3父子组件间传参通信(vue父组件子组件),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue 父子组件,vue中父子组件,vue父组件子组件,vue父子组件v-model,vue3父子组件通信,vue3父子组件通信,vue父子组件v-model,vue3父子组件通信,内容如对您有帮助,希望把文章链接给更多的朋友!

本文主要是记录Vue3在setup语法糖下的父子组件间传参的四种方式

Vue3+TypeScript

一、父传子 defineProps

父组件传值给子组件主要是由父组件为子组件通过v-bind绑定数值,而后传给子组件;子组件则通过defineProps接收使用。

如下为父组件Father.vue

<template> <div class="fa"> <div style="margin: 10px;">我是父组件</div> <Son :fatherMessage="fatherMessage"></Son> </div></template><script setup lang="ts">import Son from './Son.vue'import {ref} from "vue";const fatherMessage = ref<string>("我是父组件传过来的值")</script><style scoped>.fa{ border: 3px solid cornflowerblue; width: 400px; text-align: center;}</style>

如下为子组件Son.vue

<template> <div style="margin: 10px;border: 2px solid red"> 我是子组件 <div style="margin: 5px;border: 2px solid gold"> 父组件传值接收区:{{fatherMessage}} </div> </div></template><script setup lang="ts">interface Props { fatherMessage?: string,}defineProps<Props>()</script>

父组件Father.vue中在调用Son.vue这个子组件时,使用v-bind绑定参数fatherMessage,并传给Son.vue

子组件Son.vue使用defineProps接收fatherMessage这个参数,而后就可以正常使用该参数。

二、子传父 defineEmits

子组件传值给父组件主要是子组件通过defineEmits注册一个自定义事件,而后触发emit去调用该自定义事件,并传递参数给父组件。

在父组件中调用子组件时,通过v-on绑定一个函数,通过该函数获取传过来的值。

Vue3父子组件间传参通信(vue父组件子组件)

如下为子组件Son.vue

<template> <div style="margin: 10px;border: 2px solid red"> 我是子组件 <button @click="transValue" style="margin: 5px">传值给父组件</button> </div></template><script setup lang="ts">import {ref} from "vue";// 定义所要传给父组件的值const value = ref<String>("我是子组件传给父组件的值")// 使用defineEmits注册一个自定义事件const emit = defineEmits(["getValue"])// 点击事件触发emit,去调用我们注册的自定义事件getValue,并传递value参数至父组件const transValue = () => { emit("getValue", value.value)}</script>

如下为父组件Father.vue

<template> <div class="fa"> <div style="margin: 10px;">我是父组件</div> 父组件接收子组件传的值:{{sonMessage}} <Son @getValue="getSonValue"></Son> </div></template><script setup lang="ts">import Son from './Son.vue'import {ref} from "vue";const sonMessage = ref<string>("")const getSonValue = (value: string) => { sonMessage.value = value}</script><style scoped>.fa{ border: 3px solid cornflowerblue; width: 400px; text-align: center;}</style>

父组件Father.vue中在调用Son.vue这个子组件时,当子组件Son.vue需要传参给父组件Father.vue时,使用defineEmits注册一个事件getValue,而后设置点击事件transValue去触发emit,去调用我们注册的自定义事件getValue,并传递value参数至父组件。

父组件Father.vue在获取子组件Son.vue传过来的值时,通过在子组件上使用v-on设置响应函数getValue(该函数与子组件中的注册自定义事件getValue名称需一致),并绑定一个函数getSonValue来获取传过来的值。

三、子组件暴露属性给父组件 defineExpose

当父组件想直接调用父组件的属性或者方法时,子组件可以使用defineExpose暴露自身的属性或者方法,父组件中使用ref调用子组件暴露的属性或方法。 如下为子组件Son.vue

<template> <div style="margin: 10px;border: 2px solid red"> 我是子组件 </div></template><script setup lang="ts">import {ref, defineExpose} from "vue";// 暴露给父组件的值const toFatherValue = ref<string>("我是要暴露给父组件的值")// 暴露给父组件的方法const toFatherMethod = () => { console.log("我是要暴露给父组件的方法")}// 暴露方法和属性给父组件defineExpose({toFatherMethod, toFatherValue})</script>

如下为父组件Father.vue

<template> <div class="fa"> <div style="margin: 10px;">我是父组件</div> <button @click="getSonMethod">获取子组件的方法</button> <Son ref="sonMethodRef"></Son> </div></template><script setup lang="ts">import Son from './Son.vue'import {ref} from "vue";const sonMethodRef = ref()const getSonMethod = () => { sonMethodRef.value.toFatherMethod() console.log(sonMethodRef.value.toFatherValue)}</script><style scoped>.fa{ border: 3px solid cornflowerblue; width: 400px; text-align: center;}</style>

在子组件中定义属性toFatherValue和方法toFatherMethod,而后通过defineExpose暴露出来。 父组件调用时,为子组件绑定一个ref,并定义一个ref变量sonMethodRef,通过调用sonMethodRef,来获取子组件暴露出来的属性和方法。

四、依赖注入Provide / Inject

从上面的介绍里我们可以了解到父子组件之间的通信,但是却存在这样的情况:有一些多层级嵌套的组件,形成了一颗巨大的组件树,而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下,如果仅使用 props 则必须将其沿着组件链逐级传递下去,这会非常麻烦:

虽然这里的 Footer 组件可能根本不关心这些 props,但为了使 DeepChild 能访问到它们,仍然需要定义并向下传递。如果组件链路非常长,可能会影响到更多这条路上的组件。这一问题被称为“prop 逐级透传”,显然是我们希望尽量避免的情况。 provide 和 inject 可以帮助我们解决这一问题。 一个父组件相对于其所有的后代组件,会作为依赖提供者。任何后代的组件树,无论层级有多深,都可以注入由父组件提供给整条链路的依赖。 如下为父组件Root.vue

<template> <div> 我是root组件 <Footer></Footer> </div></template><script setup lang="ts">import { provide, ref } from 'vue'import Footer from './Footer.vue'const toChildValue= ref<string>("我是给所有子组件的值")// 将toChildValue注入到所有子组件中provide(/* 注入名 */ 'toChildValue', /* 值 */ toChildValue)</script>

如下为子组件Footer.vue

<template> <div> 我是footer组件 <div> 接收父组件的值:{{getFatherValue}} </div> <DeepChild></DeepChild> </div></template><script setup lang="ts">import DeepChild from "./DeepChild.vue"import {ref,inject,Ref} from "vue";// 获取父组件提供的值// 如果没有祖先组件提供 "toChildValue"// ref("") 会是 "这是默认值"const getFatherValue = inject<Ref<string>>(/* 注入名 */"toChildValue",/* 默认值 */ ref(""))</script>

如下为孙子组件DeepChild.vue

<template> <div> 我是deepChild组件 <div> 接收爷爷组件的值:{{getGrandFatherValue}} </div> </div></template><script setup lang="ts">import {inject, ref, Ref} from "vue";// 获取爷爷组件提供的值// 如果没有爷爷组件提供 "toChildValue"// value 会是 ""const getGrandFatherValue = inject<Ref<string>>(/* 注入名 */"toChildValue",/* 默认值 */ ref(""))</script>

当最顶层的组件Root.vue传值给所有子组件时,使用provide进行注入

provide(/* 注入名 */ 'toChildValue', /* 值 */ toChildValue)

而后无论哪个子组件想要获取toChildValue的值,只需使用inject即可

inject<Ref<string>>(/* 注入名 */"toChildValue",/* 默认值 */ ref(""))

当提供 / 注入响应式的数据时,如果想改变数据时,建议尽可能将任何对响应式状态的变更都保持在供给方组件中,即根组件Root.vue。这样可以确保所提供状态的

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

上一篇:OFDM雷达信号模糊函数MATLAB仿真分析(雷达信号pri)

下一篇:vue 项目的屏幕自适应方案(vue display)

  • 生产企业出口自产的小汽车
  • 简易计税方法和免税该怎么选择
  • 从厂家拿货怎么谈价格
  • 个体的个人所得税怎么算
  • 增值税勾选统计后怎么申报
  • 个别计价法和先进先出法举例
  • 资金账簿减半征收印花税财税2018 50号
  • 折现率怎么确定 公式
  • 融资租赁和经营性租赁区别
  • 公司现金支付管理办法
  • 合作社 注销
  • 装卸收入的增值税税率是多少
  • 企业所得税营业税金及附加
  • 小微企业差旅费可以税前扣除吗
  • 工程施工纳税
  • 结存材料实际成本计算公式例题
  • 企业报税的详细流程期限为
  • 高新企业研发项目
  • 新开办公司前三个月没交社保,后面正常缴纳
  • mac怎么打开hosts文件
  • 电脑开机无启动
  • 印花税可以不计提嘛
  • 发票金额大于报销金额可以吗
  • 鸿蒙2.0正式版升级
  • 银行初级证书全称
  • pow是什么意思中文翻译
  • 直系亲属股权转让免征个人所得税
  • 企业办理银行结汇流程
  • 委托外单位加工发出的材料会影响账面价值吗
  • 公司搞活动买的车能买吗
  • Sandilands省级森林中被白霜覆盖的番红花,加拿大曼尼托巴 (© Jaynes Gallery/Danita Delimont)
  • php的json_encode
  • 厂房的设计审查要求
  • 上海广为
  • phpstorm创建php文件
  • autocut跟踪调节
  • bug的定位和跟踪
  • 研发费用如何做加计扣除
  • 销售返利的会计分录处理
  • 企业短期借款的会计分录
  • 一般纳税人如何交增值税
  • DB2 9(Viper)快速入门
  • MYSQL数据库技术基础
  • 个人增值税发票税率
  • 营业额的纳税比例是多少
  • 计提的坏账准备计入什么科目
  • 月报表该怎么做表格
  • 收到残障金退回怎么处理
  • 科技专项资金
  • 购买材料发生商损怎么算
  • 小规模纳税人的增值税计入成本吗
  • 预付账款暂估是什么意思
  • 年度采购总额在哪个报表
  • 收到投资款怎么做凭证
  • sqlserver 表分区工具
  • win8系统怎么关闭自动更新系统
  • ssh连接虚拟机centos
  • macappstore下载软件一直要密码
  • Windows Server 2012服务器管理器的详细介绍
  • macbookpro移到废纸篓快捷键
  • Win7电脑自动关机是什么原因
  • win7 注册表 ahci
  • win8如何打开任务管理器
  • 命令行查看硬盘序列号
  • win10系统edge浏览器无法调用F12
  • 一、Unity3D 5.0.1-示例项目“汽车游戏”的展示及开发准备
  • opengl update
  • number fields to_char
  • z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
  • nodejs不再维护
  • nodejs使用场景
  • jquery轮播代码
  • CalledFromWrongThreadException: Only the original thread that created a view
  • jquery的心得
  • android教学
  • shell 批量改名
  • 个人可以到税务开物业费的
  • 北京市地区代码是多少
  • 中国税务标识标准字体
  • 个人所得税怎么申报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设