vue3父子组件传值;vue3子组件传值给父组件;vue3子组件监听父组件接口传值;父子组件事件调用

代码在文末,均可直接复制使用

本文主要描述,父子组件传值、调用等问题

文章目录

    • 问题1:子组件接收不到父组件传值
    • 问题2:子组件接受的值,修改后,发现父组件值也改变了
    • 问题3:子组件接受值,修改后页面不更新
    • 问题4:子传父事件,父组件接受值,赋值无效
    • 5、子传父
    • 6、父调用子
    • 7、代码


问题1:子组件接收不到父组件传值

如果父组件的值,在onMounted时候赋值,或者是接口等异步赋值,那子组件直接拿不到修改的值。子组件需要使用watch监听
搜索子组件son.vue的watch查看

问题2:子组件接受的值,修改后,发现父组件值也改变了

如果不想改变,需要在子组件接受时候,进行深拷贝赋值。建议都是以深拷贝,如果想改父组件的值,就单独子传父事件修改

问题3:子组件接受值,修改后页面不更新

在子组件接受简单数据类型时候,改成ref接受,生成响应式数据
具体查看: let num1VALUE = ref(props.num1) // 生成响应式数据 否则修改数据 页面不变化

问题4:子传父事件,父组件接受值,赋值无效

这是因为你父组件的那个变量,是使用reactive声明的。reactive 不要直接变量data=赋值!!!会丢失响应式的。如果用ref就不会 非要赋值要不就使用单个属性一个个赋值 obj.属性 = 属性值 、要不就给原对象多包裹一层对象
由此可见:声明尽量用ref。。。。

5、子传父

搜索 update:obj 查看。

6、父调用子

搜索sonRef.value.childMethod()查看

7、代码

父组件far.vue

<template><div><div>父:{{ state.str1 }}--{{ state.data1 }}--{{ obj1 }} -- {{ num1 }}</div><button style="border: 1px solid cyan;" @click="callChildMethod">父调子事件</button><hr><son ref="sonRef" :str1="state.str1" :data1="state.data1" :obj1="obj1" :num1="num1" @update:obj="getObj" /></div>
</template><script>
import { defineComponent, onMounted, reactive ,toRefs,ref} from 'vue'
import Son from './son.vue'export default defineComponent({components: {Son},setup() {const state = reactive({str1: '',data1: {}})let obj1 = reactive({a:1,})let num1 = ref(1)// 父接受子function getObj(val){obj1.a = val.a // reactive 不要直接data=赋值!!!会丢失响应式的,如果用ref就不会 非要赋值要不就使用 obj.属性 = 属性值 要不就给原对象多包裹一层对象// obj1 = val// obj1 = reactive({...val})console.log('父接受子',val,obj1);}// 父调用子事件const sonRef = ref(null)function callChildMethod() {sonRef.value.childMethod()}onMounted(() => {// 对于在onMounted或异步的数据 传递给子组件 子组件应该使用watch监听接受 否则拿不到数据setTimeout(() => {state.str1 = '二次赋值!'state.data1 = {name: 'Alice',age: 25}}, 1000);})return {state,obj1,num1,sonRef,getObj,callChildMethod}}
})
</script>

子组件son.vue

<template><div><div>子:{{ state.str1VALUE }}--{{ state.data1VALUE }}--{{ obj1VALUE }} -- {{ num1VALUE }}</div><button style="border: 1px solid cyan;" @click="setVal">按钮该值</button><button style="border: 1px solid cyan;" @click="setFarVal">子传父</button></div>
</template><script>
import { defineComponent, reactive, watch,toRefs,toRef,ref } from 'vue'export default defineComponent({props: {str1: String,data1: Object,obj1: Object,num1: Number,},emits: ['update:obj'],setup(props, { emit }) {const state = reactive({str1VALUE: '',data1VALUE: {}})let obj1VALUE = JSON.parse(JSON.stringify(props.obj1)) // 复杂数据类型obj如果不用深拷贝赋值 修改对象obj.name单一属性时候(state.data1VALUE.age = 33) 会导致父组件的源值改变 也会导致监听事件再次执行let num1VALUE = ref(props.num1) // 生成响应式数据 否则修改数据 页面不变化// 同时监听str1和data1   对于在onMounted或异步的数据 传递给子组件 子组件应该使用watch监听接受 否则拿不到数据watch([() => props.str1, () => props.data1], ([str1, data1]) => {console.log('监听',str1,data1);state.str1VALUE = JSON.parse(JSON.stringify(str1)) // 复杂数据类型obj如果不用深拷贝赋值 修改对象obj.name单一属性时候(state.data1VALUE.age = 33) 会导致父组件的源值改变 也会导致监听事件再次执行state.data1VALUE = JSON.parse(JSON.stringify(data1))}, { deep:true })// setTimeout(() => {//   state.str1VALUE = 'str1'// }, 2000);function setVal(){state.str1VALUE = '三次修改赋值'// state.data1VALUE = {//   name: '张三',//   age: 11// }state.data1VALUE.age = 33obj1VALUE.a = 3num1VALUE.value = 3}// 子传父function setFarVal(){let obj = {a: 123456}emit('update:obj', obj);console.log('子传父',obj);}function childMethod(){console.log('子事件');}return {state,obj1VALUE,num1VALUE,setVal,setFarVal,childMethod}}
})
</script>

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

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

相关文章

07-HDFS入门及shell命令

1 文件系统 是一种存储和组织数据的方法&#xff0c;它使得文件访问和查询变得容易使得文件和树形目录的抽象逻辑概念代替了磁盘等物理设备使用数据块的概念&#xff0c;用户使用文件系统来保存数据不必关心数据底层存在硬盘哪里&#xff0c;只需记住这个文件的所属目录和文件…

STM32基于CubeIDE和HAL库 基础入门学习笔记:物联网项目开发流程和思路

文章目录&#xff1a; 第一部分&#xff1a;项目开始前的计划与准备 1.项目策划和开发规范 1.1 项目要求文档 1.2 技术实现文档 1.3 开发规范 2.创建项目工程与日志 第二部分&#xff1a;调通硬件电路与驱动程序 第三部分&#xff1a;编写最基础的应用程序 第四部分&…

opencv带GStreamer之Windows编译

目录 1、下载GStreamer和安装2. GSTReamer CMake配置3. 验证是否配置成功 1、下载GStreamer和安装 下载地址如下&#xff1a; gstreamer-1.0-msvc-x86_64-1.18.2.msi gstreamer-1.0-devel-msvc-x86_64-1.18.2.msi 安装目录无要求&#xff0c;主要是安装完设置环境变量 xxx\1…

【css】渐变

渐变是设置一种颜色或者多种颜色之间的过度变化。 两种渐变类型&#xff1a; 线性渐变&#xff08;向下/向上/向左/向右/对角线&#xff09; 径向渐变&#xff08;由其中心定义&#xff09; 1、线性渐变 语法&#xff1a;background-image: linear-gradient(direction, co…

一图搞懂二层交换机、三层交换机和路由器的区别

二层交换机、三层交换机、路由器的区别 二层交换机、三层交换机、路由器对比二层交换机三层交换机路由器工作在第几层数据链路层&#xff08;第二层&#xff09;网络层&#xff08;第三层&#xff09;网络层&#xff08;第三层&#xff09;功能学习和转发帧根据IP地址转发数据…

数据链路层是什么?

数据链路层承接上层的数据&#xff0c;然后使用下层提供的信道&#xff0c;按照一定的规则&#xff0c;进行数据传输。 物理层提供了传输媒体与连接&#xff08;信道&#xff09;&#xff08;数据链路层使用的信道通常是物理层提供的信道&#xff09;&#xff0c;即提供了比特…

webpack自动注册全局组件

例如&#xff0c;在form文件夹下有许多流程类表单&#xff0c;一个一个注册引入非常浪费时间&#xff0c;可使用webpack的require.context方法来自动导入 import { firstToUpper } from /utils/methodsconst taskTable {install: vue > {const req require.context(../fo…

springboot结合element-ui实现增删改查,附前端完整代码

实现功能 前端完整代码 后端接口 登录&#xff0c;注册&#xff0c;查询所有用户&#xff0c;根据用户名模糊查询&#xff0c;添加用户&#xff0c;更新用户&#xff0c;删除用户 前端 注册&#xff0c;登录&#xff0c;退出&#xff0c;用户增删改查&#xff0c;导航栏&#…

Android Sutdio 导入libs文件夹下的jar包没反应

有点离谱&#xff0c;笨笨的脑子才犯的错误 首先发现问题&#xff1a;转移项目的时候 直接复制粘贴libs文件夹下的jar包到新项目&#xff0c;在build.gradle文件下 使用语句并应用也没反应&#xff08;jar包没有出现箭头且代码报错&#xff0c;找不到&#xff09; implementa…

什么样的 PLC 可以算是高端 PLC?

针对问题本身&#xff0c;有的回答里都提到了。可靠性&#xff0c;扫描时间&#xff0c;带离散量点数&#xff0c;带模拟量输出点数&#xff0c;扩展性&#xff0c;这些都可以看作PLC系统级别划分的依据。比如说&#xff0c;有相应安全完整性等级认证的LOGIC SOLVER为核心的PLC…

SpringBoot复习:(37)自定义ErrorController

所有接口统一返回的数据格式 package cn.edu.tju.domain;public class MyResponse {private int code;private String message;private String exception;private String stack;public int getCode() {return code;}public void setCode(int code) {this.code code;}public S…

五个独特且有趣的ChatGPT指令

今天分享5个很实用的指令&#xff0c;这几个指令很多时候对我们输出内容的连贯性、文章风格、创意性等方面有着决定性的作用。 目录 第一个&#xff1a;Max tokens&#xff08;最大令牌&#xff09; 第二个&#xff1a;Top_p(控制采样) 第三个&#xff1a;Presence_penalty …

Android Studio System.out.println()中文乱码

第一步&#xff1a; 打开studio64.exe.vmoptions加入-Dfile.encodingUTF-8 第二步&#xff1a; File-Settings-Editor-File Encodings 把所有的编码格式改为UTF-8 尝试跑一下代码&#xff0c;如果还不行&#xff0c;重启IDE 再试试。

UI美工设计岗位的工作职责

UI美工设计岗位的工作职责1 职责&#xff1a; 1、负责软件界面的美术设计、创意工作和制作工作; 2、根据各种相关软件的用户群&#xff0c;提出构思新颖、有高度吸引力的创意设计; 3、对页面进行优化&#xff0c;使用户操作更趋于人性化; 4、维护现有的应用产品; 5、收集和…

NLP文本匹配任务Text Matching [无监督训练]:SimCSE、ESimCSE、DiffCSE 项目实践

NLP文本匹配任务Text Matching [无监督训练]&#xff1a;SimCSE、ESimCSE、DiffCSE 项目实践 文本匹配多用于计算两个文本之间的相似度&#xff0c;该示例会基于 ESimCSE 实现一个无监督的文本匹配模型的训练流程。文本匹配多用于计算两段「自然文本」之间的「相似度」。 例如…

一百五十三、Kettle——Linux上安装的kettle9.3启动后说缺少libwebkitgtk-1.0(真是坑爹啊,刚龟速下载又忍痛卸载)

一、问题 在kettle9.3可以在本地连接hive312后&#xff0c;在Linux中安装了kettle9.3&#xff0c;结果启动时报错WARNING: no libwebkitgtk-1.0 detected, some features will be unavailable 而且如果直接下载libwebkitgtk的话也没有用 [roothurys22 data-integration]# yu…

Python学习笔记第五十六(Pandas JSON)

Python学习笔记第五十六天 Pandas JSONread_json()to_string()字典转为 DataFrame 数据 内嵌的 JSON 数据json_normalize() 后记 Pandas JSON JSON&#xff08;JavaScript Object Notation&#xff0c;JavaScript 对象表示法&#xff09;&#xff0c;是存储和交换文本信息的语…

在线吉他调音

先看效果&#xff08;图片没有声&#xff0c;可以下载源码看看&#xff0c;比这更好~&#xff09;&#xff1a; 再看代码&#xff08;查看更多&#xff09;&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8&quo…

【第二阶段】kotlin的函数类型作为返回类型

fun main() {//调用,返回的是一个匿名类型&#xff0c;所以info就是一个匿名函数val infoshow("",0)//info接受的返回值为匿名类型&#xff0c;此时info就是一个匿名函数println(info("kotlin",20)) }//返回类型为一个匿名函数的返回类型fun show(name:Str…

01 - 工作区、暂存区、版本库、远程仓库 - 以一次连贯的提交操作为例

查看所有文章链接&#xff1a;&#xff08;更新中&#xff09;GIT常用场景- 目录 文章目录 1. 工作区、暂存区、版本库、远程仓库1.1 工作区1.2 工作区 > 暂存区&#xff1a;git add1.3 暂存区 > 版本库&#xff1a;git commit1.4 push到远程仓库 1. 工作区、暂存区、版本…