[Vue3]父子组件相互传值数据同步

简介

vue3中使用setup语法糖,父子组件之间相互传递数据及数据同步问题

文章目录

  • 简介
  • 父传子
    • props传递值 使用v-bind绑定
      • props需要计算
        • toRef
        • computed
    • emit传递方法 使用v-on绑定
  • 子传父
    • expose
  • v-model
  • 总结


父传子

props传递值 使用v-bind绑定

父组件通过props给子组件传递值,props传递的值在子组件中无法修改

// 父组件
<template><div style="color: red">我是父组件<Child :msg="msg"></Child></div>
</template><script setup>import Child from './Child.vue';import { ref } from 'vue';const msg = ref('111');
</script>
// 子组件
<template><div style="color: blue"><div>我是子组件, 父组件传递来的值是{{msg}}</div></div>
</template><script setup>defineProps({msg: String,})
</script>

在这里插入图片描述

props需要计算

子组件获取props后,需要显示根据其计算后的值,而props是无法修改的。

toRef

props是具有响应式的,普通的解构和取值会失去响应式,所以下面这种情况只能取到props的初始值,如果props变化子组件不会更新:

// 父组件
<script setup>import Child from './Child.vue';import { ref } from 'vue';const msg = ref('111');
</script><template><div style="color: red">我是父组件{{ msg }}<Child :msg="msg"></Child><button @click="() => msg = '222'">父组件点击改变props值</button></div>
</template>
// 子组件
<script setup>import { ref } from 'vue'const props = defineProps({msg: String,})const a = ref(props.msg);
</script><template><div style="color: blue"><div>我是子组件, 父组件传递来的值是{{a}}</div></div>
</template>

点击按钮后,父组件传递的props改变,但是子组件接收到的却不变。
如果父组件中props没有赋初始值,在子组件中接收到的会是undefined。这是因为 ref 是对传入数据的拷贝,但 toRef 是对传入数据的引用。

// 子组件import { toRef } from 'vue'const props = defineProps({msg: String,})const a = toRef(props, 'msg');// const { msg } = toRefs(props); // 使用toRefs也可以

在这里插入图片描述

computed

根据props修改可以直接使用计算属性

// 父组件
<script setup>import Child from './Child.vue';import { ref } from 'vue';const msg = ref('A')
</script><template><div style="color: red">我是父组件{{ msg }}<Child :msg="msg"></Child><button @click="() => msg = 'B'">父组件点击改变props值</button></div>
</template>
// 子组件
<script setup>import { computed } from 'vue'const props = defineProps({msg: String,})const a = computed(() => props.msg.trim().toLowerCase())
</script><template><div style="color: blue"><div>我是子组件, 父组件传递来的值是{{ a }}</div></div>
</template>

在这里插入图片描述

emit传递方法 使用v-on绑定

vue3中子组件想调用父组件传递的方法,需要使用defineEmits

// 父组件
<script setup>import { ref } from 'vue';import Child from './Child.vue';const a = ref('1');const handleTest = () => {a.value = 'change';}
</script><template><div style="color: red">我是父组件<Child :msg="a" @test="handleTest"></Child></div>
</template>
// 子组件
<script setup>  defineProps(['msg']);const emit = defineEmits(["test"])const handleClick = () => {emit("test")}
</script><template><div style="color: blue"><div>我是子组件{{ msg }}</div><button @click="handleClick">子组件调用父组件方法</button></div>
</template>

在这里插入图片描述

emit的第一个参数是事件名,第二个参数是传递的参数。
这里如果父组件没有传递这个函数,也不会报错。

子传父

expose

父组件展示子组件的数据与方法,子组件需要通过defineExpose将自己的值暴露出来,父组件通过子组件上的ref取到其值

// 父组件
<script setup>import { ref, onMounted } from 'vue';import Child from './Child.vue';const a = ref('1');const x = ref();onMounted(()=>{a.value = x.value.message})const handle = () => {x.value.handleMessage();}
</script><template><div style="color: red">我是父组件<Child ref="x"></Child>{{ a }}<button @click="handle">点击子组件触发事件</button></div>
</template>
<script setup>import { ref } from "vue";const a = ref('我的值是1')const message = ref('我是子组件暴露的值');const handleMessage = () => {a.value = 'Change';}defineExpose({message,handleMessage});
</script><template><div style="color: blue">我是子组件{{ a }}</div>
</template>

在这里插入图片描述
父组件调用子组件expose的值,一定要在onMounted之后,否则子组件没有完全加载,取不到值。
这种方法,如果子组件的值修改了,那么父组件也是拿不到的。

v-model

使用v-model可以实现父子组件之间值的同步。

// 父组件
<script setup>
import Child from './Child.vue'
import { ref } from 'vue'const msg = ref('Hello World!')
</script><template><h1>{{ msg }}</h1><Child v-model="msg" />
</template>
// 子组件
<script setup>
const model = defineModel()
</script><template><span>My input</span> <input v-model="model">
</template>

在输入框中输入值,上面也会更新
defineModel是一个编译宏,它相当于:

// 子组件
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script><template><span>My input</span><input:value="props.modelValue"@input="emit('update:modelValue', $event.target.value)"/>
</template>

所以 v-model如果没有另外声明,实际是给子组件设置了一个名为modelValue的props,一个update:modelValue的emit(注意注意,emit调用时第一个参数一定要跟define时相同,否则找不到,update:后面也不要加空格)。

v-model其实相当于v-bindv-on的组合:

<template><h1>{{ msg }}</h1><Child :modelValue="msg" @update:modelValue="val => msg= val"></Child>
</template>

v-model会将modelValue这个props和update:modelValue这个event绑定在一起。当子组件的值发生变化时,会触发update:modelValue 事件传递给父组件,父组件接收到事件后会更新自己的值并重新渲染子组件;当父组件的值发生变化时,会通过modelValue传递给子组件,子组件接收到 prop 后会更新自己的值并重新渲染。这样就实现了父子组件之间的数据同步。

v-model可以写成v-model:自定义='自定义',那么更新的值就是自定义,更新的函数就是 update:自定义

总结

  • 父传子:definePropsdefineEmits
  • 子传父:defineExpose
  • 双向绑定:v-bind

vue中父子传值的方法还是非常多的,但是其中不乏各种坑,新手还是应该老老实实用官方推荐,否则真的很难不踩坑,太灵活了有些时候也是一种问题呢(无语笑)。

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

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

相关文章

Python基础知识:Python与序列相关的内置函数

与序列相关的内置函数如表所示。 与序列相关的内置函数 函数的作用 len(seq) 计算序列的长度&#xff08;包含多少个元素&#xff09; max(seq) 查找序列中的最大元素 min(seq) 查找序列中的最小元素 list(seq) 将序列转换为列表&#xff0c;注意不能转换字典 str(se…

openGauss学习笔记-214 openGauss 性能调优-确定性能调优范围

文章目录 openGauss学习笔记-214 openGauss 性能调优-确定性能调优范围214.1 性能因素214.2 调优范围确定 openGauss学习笔记-214 openGauss 性能调优-确定性能调优范围 数据库性能调优通常发生在用户对业务的执行效率不满意&#xff0c;期望通过调优加快业务执行的情况下。正…

如何解决部分图片读取转化异常的问题

问题描述 接触到一个数据集&#xff0c;有个别图片在读取转化的时候出现了异常&#xff0c;由于图片之间有关联&#xff0c;导致后续图片无法时候。 解决方法 将异常的图片转为白色或者黑色的图片&#xff0c;保证其他的图片可以正常使用&#xff01;代码如下&#xff1a; …

两种方式实现文本超出指定行数显示展开收起...

需要实现这样一个功能 默认高度下文本超出隐藏&#xff0c;点击展开可查看所有内容&#xff0c;点击收起可折叠 方法一&#xff1a;通过html和css实现 代码部分 html:<div className"expand-fold"><input id"check-box" type"checkbox&qu…

【Android】240204 android studio build.gradle.kts APK名字带日期

通过Android studio 生成 APK 名字的时候&#xff0c;带年月日时&#xff0c;可以在 build.gradle 里面定义&#xff1b; 在Gradle脚本的build任务中&#xff0c;每当我构建项目时&#xff0c;我都希望获得当前时间戳&#xff0c;并将其保存到项目资源目录中的文件中。如果我理…

04-尚硅谷Vue_Vue中的ajax

文章目录 1. 解决开发环境 Ajax 跨域问题 【前端】尚硅谷Vue2-Vue3全家桶笔记目录贴 1. 解决开发环境 Ajax 跨域问题

Camunda会签、或签、比例签

&#x1f496;专栏简介 ✔️本专栏将从Camunda(卡蒙达) 7中的关键概念到实现中国式工作流相关功能。 ✔️文章中只包含演示核心代码及测试数据&#xff0c;完整代码可查看作者的开源项目snail-camunda ✔️请给snail-camunda 点颗星吧&#x1f618; &#x1f496;说在前面 …

EasyX图形库学习(二、文字输出)

目录 一、文字绘制函数 字体属性结构体:logfont 文字输出 outtextxy 在指定位置输出字符串。 ​编辑 但如果直接使用,可能有以下报错&#xff1a; 三种解决方案&#xff1a; 将一个int类型的分数,输出到图形界面上 如果直接使用&#xff1a; 会把score输入进去根据A…

【C/C++ 13】C++11高效特性

目录 一、初始化列表 二、auto 三、decltype 四、可变参数列表 五、lambda表达式 C11在C98的基础上增添了许多特性&#xff0c;但是同时也使得C程序的开发变得复杂繁琐&#xff0c;让众多开发者苦不堪言&#xff0c;于是我们需要从C11新增舔的特性中选择一些能够提高开发效…

ROS从入门到精通4-1:Docker安装与常用命令总结

目录 0 专栏介绍1 Docker与机器人应用2 Docker安装步骤3 Docker常用命令3.1 创建与启动容器3.2 暂停与删除容器3.3 容器文件拷贝3.4 构建镜像与上下文 0 专栏介绍 本专栏旨在通过对ROS的系统学习&#xff0c;掌握ROS底层基本分布式原理&#xff0c;并具有机器人建模和应用ROS进…

【文件增量备份系统】前端项目构建

文章目录 创建项目安装项目依赖引入element plus组件下载组件在main.js中使用组件测试 整合路由router下载组件创建路由管理器index.js使用路由App.vue上面使用 <router-view />测试 整合axios下载组件工具类axiosRequest.js工具类使用 创建项目 damwangrunqindeMBP dev…

车载测试中:如何处理 bug

一&#xff1a;Jira 提交 bug 包含那些内容 二&#xff1a;如何处理现上 bug 三&#xff1a;车载相关的 bug 如何定位 四&#xff1a;遇到 bug &#xff0c;复现不出来怎么办 五&#xff1a;bug 的处理流程 一&#xff1a;Jira 提交 bug 包含那些内容二&#xff1a;如何处理现上…

Java设计模式-模板方法模式(14)

行为型模式 行为型模式用于描述程序在运行时复杂的流程控制,即描述多个类或对象之间怎样相互协作共同完成单个对象都无法单独完成的任务,它涉及算法与对象间职责的分配。行为型模式分为类行为模式和对象行为模式,前者采用继承机制来在类间分派行为,后者采用组合或聚合在对…

uniapp android和微信小程序如何实现PDF在线预览

Hello大家好&#xff01;我是咕噜铁蛋&#xff0c;UniApp在开发移动应用时提供了跨平台的解决方案&#xff0c;能够同时支持Android和iOS系统&#xff0c;而微信小程序则是一种轻量级的应用形式&#xff0c;可以在微信内直接运行。本文将探讨如何利用UniApp和微信小程序实现PDF…

k8s学习-Kubernetes的网络

Kubernetes作为编排引擎管理着分布在不同节点上的容器和Pod。Pod、Service、外部组件之间需要⼀种可靠的方找到彼此并进行通信&#xff0c;Kubernetes网络则负责提供这个保障。 1.1 Kubernetes网络模型 Container-to-Container的网络 当Pod被调度到某个节点&#xff0c;Pod中…

java数组学习

目录 1.数组概念 2.数组的定义 3.数组的静态初始化 4.地址值 5.数组元素访问 6.索引 7.数组的遍历 8.数组的动态初始化 9.数组两种初始化方式的区别 10.数组常见问题 1.数组概念 数组是一种容器&#xff0c;可以同来存储同种数据类型的多个值。但是数组容器在存储数据…

Redis核心技术与实战【学习笔记】 - 24.Redis 脑裂

简述 所谓脑裂&#xff0c;就是指在主从集群中&#xff0c;同时有两个主节点&#xff0c;它们都能接收写请求。而脑裂最直接的影响就是客户端不知道该往哪个主节点写入数据&#xff0c;结果就是不同的客户端会往不同的主机诶点上写入数据。而且&#xff0c;严重的话&#xff0…

从零开始手写mmo游戏从框架到爆炸(三)— 服务启动接口与网络事件监听器

上一章我们完成了netty服务启动的相关抽象&#xff08;https://blog.csdn.net/money9sun/article/details/136025471&#xff09;&#xff0c;这一章我们再新增一个全局的服务启动类&#xff0c;方便后续扩展。 服务启动 新增的两个类如下&#xff1a; 定义一个接口IServer …

Elasticsearch:使用 Inference API 进行语义搜索

在我之前的文章 “Elastic Search 8.12&#xff1a;让 Lucene 更快&#xff0c;让开发人员更快”&#xff0c;我有提到 Inference API。这些功能的核心部分始终是灵活的第三方模型管理&#xff0c;使客户能够利用当今市场上下载最多的向量数据库及其选择的转换器模型。在今天的…

npm出现 Error: EISDIR: illegal operation on a directory, read

npm出现 Error: EISDIR: illegal operation on a directory, read 一、问题二、解决 一、问题 可能是由于运行了npm config set cafile ""之类的方法,造成了cafile为空 二、解决 文件位于C:\Users\用户名\ 下 找到c盘下的Users下的用户目录&#xff0c;进入找到.n…