vue3父子组件通信,子组件修改父组件传过来的值

news2024/11/11 5:01:15

一、第一种,通过props方式传值:

父组件:

父组件调用子组件Child1时通过 :msg2= "msg2"把msg2的数据传给子组件,并且通过自定义事件接收子组件的emit通知,用来修改父组件的msg2数据。

源码:

<template>
  <div>
    我是home组件 父组件
    <h1>{{ msg }}</h1>
    <div>父组件--props方式传值:{{ msg2 }}</div>

    <Child1 :msg2="msg2" @event="eventFn" />
  </div>
</template>
<script setup>
import { ref } from 'vue'
import Child1 from './child1.vue'
const props = defineProps(['msg'])

const msg2 = ref('今天是星期三,多云。')

const eventFn = (val) => {
    msg2.value = val
}

</script>

子组件:

子组件通过defineProps接收一下msg2 ,可以直接展示在模板上,子组件自定义emit事件去通知父组件修改msg2的数据,数值是子组件传过去的。

源码:

<template>
  <div>
    <h3>大家好,我是子组件1</h3>
    <button @click="handleClick">修改父组件数据msg2</button>
    <div>子组件——props方式传过来:{{ msg2 }}</div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
const props = defineProps(['msg2'])

const emit = defineEmits(['event'])

const handleClick = () => {
    emit('event', '希望早日出太阳,暴富而不是暴晒!')
}

</script>

点击前:

 

点击后:

 

 二、第二种,通过v-model+冒号+要传的值  的方式(这个v-model可以写多个):

父组件:

父组件调用子组件时,通过v-model:num="num" 的方式传值给子组件。

源码:

<template>
  <div>
    我是home组件 父组件
    <h1>{{ msg }}</h1>
    <div>父组件--props方式传值:{{ msg2 }}</div>
    <div>父组件num——v-model方式传值:{{ num }}</div>

    <Child1
     :msg2="msg2" @event="eventFn"
     v-model:num="num"
     />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import Child1 from './child1.vue'
const props = defineProps(['msg'])

const msg2 = ref('今天是星期三,多云。')
const num = ref(0)

const eventFn = (val) => {
    msg2.value = val
}

</script>

子组件:

子组件也先通过defineProps接收一下num,并展示。然后通过自定义emit事件

const emit = defineEmit(['update: num'])

然后通过点击事件updateNum方法来触发通知父组件修改num数据。

源码:

<template>
  <div>
    <h3>大家好,我是子组件1</h3>
    <button @click="handleClick">修改父组件数据msg2</button>
    <div>子组件——props方式传过来:{{ msg2 }}</div>

    <button @click="updateNum">修改父组件num</button>
    <div>子组件num——v-model方式传过来:{{ num }}</div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
const props = defineProps(['msg2','num'])

const emit = defineEmits(['event', 'update:num'])

const handleClick = () => {
    emit('event', '希望早日出太阳,暴富而不是暴晒!')
}
const updateNum = () => {
    emit('update:num', 222)
}

</script>

点击前:

 

点击后:

 

 三、父组件调用子组件时,通过v-model传多个值

父组件写法:

子组件写法:

效果:

 

以上就是vue3中,props和v-model两种常用的父子组件通信方法 。

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

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

相关文章

借助 CloudFlare 增强站点内容保护防采集

今天在一位站长的帮助下实测了 CloudFlare 增强站点内容保护实现防采集的功能,效果那是杠杠的,如果您的站点原创内容比较多的话,明月强烈建议试试 CloudFlare 这个内容保护,无论是 WordPress 、Typecho 都有非常好的效果,并且几乎没有任何误伤,搜索引擎爬虫蜘蛛更是不会影…

制作ARM架构 docker镜像

docker简介 docker客户端 Docker 客户端有两种替代选项:名为 docker 的命令行应用程序或名为 Docker Desktop 的基于图形用户界面 (GUI) 的应用程序。 CLI 和 Docker Desktop 均与 Docker 服务器交互。 来自 CLI 或 Docker Desktop 的 docker 命令使用 Docker REST API 将指…

Java与Gradle 的版本兼容性矩阵验证

1.下面这个表格显示了java和gradle的版本兼容性情况 2.根据上面这份表格理解&#xff0c;是不是java17就需要gradle 7.3之后来支持。用android studio 来试验一下: jdk选择: build成功: 说明JDK17并不是一定需要Gradle 7.3之后版本 3.使用JDK1.8、JDK11验证一下Grade 7.2是否可…

如何解决SEO排名上升后遭遇的攻击问题

随着搜索引擎优化&#xff08;SEO&#xff09;策略的成功实施&#xff0c;网站排名的提升往往会引来更多的流量与关注&#xff0c;但同时也可能成为恶意攻击的目标&#xff0c;包括DDoS攻击、SQL注入、XSS攻击等。这些攻击不仅影响用户体验&#xff0c;还可能导致网站降权甚至被…

报名倒计时!「飞天技术沙龙-CentOS 迁移替换专场」参会指南

为帮助广大用户诊断 CentOS 迁移替换过程中的疑难杂症&#xff0c;「飞天技术沙龙-CentOS 迁移替换专场」将于 5 月 29 日&#xff08;周三&#xff09;在北京举办&#xff0c;将围绕如何在确保服务的连续性和稳定性的前提下实现平滑迁移及如何最大限度地利用现有资源前提下确保…

沃飞携AE200真机亮相澳门,全方位赋能城市低空出行

5月22日-25日&#xff0c;第四届BEYOND国际科技创新博览会&#xff08;BEYOND Expo 2024&#xff09;在澳门盛大举行。吉利沃飞长空携旗下全自研产品AE200真机亮相&#xff0c;吸引了现场众多领导嘉宾以及媒体、观众的关注。 作为亚洲顶尖的年度科技盛会&#xff0c;本届BEYOND…

【C++】:vector容器的基本使用

目录 &#x1f352;1&#xff0c;vector的介绍&#x1f352;2&#xff0c;vector的使用&#x1f42f;2.1 vector的构造&#x1f981;2.2 vector iterator 的使用&#x1f33d;2.3 vector 空间增长问题&#x1f353;2.4 vector 增删查改&#x1f42f;2.5 vector 访问及遍历&…

2022全国大学生数学建模竞赛ABC题(论文+代码)

文章目录 &#xff08;1&#xff09;2022A波浪能最大输出功率&#xff08;2&#xff09;2022B无人机定位&#xff08;3&#xff09;2022C古代玻璃制品成分分析&#xff08;4&#xff09;论文和代码链接 &#xff08;1&#xff09;2022A波浪能最大输出功率 &#xff08;2&#x…

用(华为)三层交换技术解决不同vlan间通信问题

用三层交换技术解决不同vlan间通信问题 一、网络拓扑&#xff1a; 二、配置思路&#xff1a;自下而上配置 1.PC端配置基本IP信息包括网关 2.接入交换机S1上划分三个vlan&#xff0c;分别是VLAN 10 VLAN 20 VLAN 30 并且将对应的接口加入指定的vlan 3.给接入交换机配置trunk链路…

华为交换机基础实验----VLAN基础

交换机篇实验&#xff1a; 给交换机创建VLAN 1.单个VLAN的创建 [S]vlan 10 查看的方法&#xff1a;dis vlan 2.批量创建vlan的方法 Vlan b 20 30 40 连续创建三个vlan&#xff0c;分别为vlan20 vlan30和vlan40 [SONY-S1-vlan10]vlan b 20 30 40 3.批量创建连续的vlan&#xf…

找不到vcruntime140.dll等140dll的解决方法,怎么才能快速的修复?

找不到vcruntime140.dll等140dll要怎么办&#xff1f;以上这两个其实都是属于dll文件来的&#xff0c;它们的缺失会导致某些程序直接运行不了&#xff0c;你需要重新的进行修复&#xff0c;然后程序才可以运行下去&#xff0c;下面一起来了解一下找不到vcruntime140.dll等140dl…

逻辑回归(头歌)

第1关&#xff1a;逻辑回归算法大体思想 #encodingutf8import numpy as np#sigmoid函数 def sigmoid(t):#输入&#xff1a;负无穷到正无穷的实数#输出&#xff1a;转换后的概率值#********** Begin **********#result 1.0 / (1 np.exp(-t))#********** End **********#retur…

C++笔试强训day34

目录 1.ISBN号码 2.kotori和迷宫 3.矩阵最长递增路径 1.ISBN号码 链接https://www.nowcoder.com/practice/95712f695f27434b9703394c98b78ee5?tpId290&tqId39864&ru/exam/oj 提取题意&#xff0c;模拟一下即可。 #include <iostream> using namespace std; …

su模型转3d模型不够平滑怎么办?---模大狮

当将SU模型转换为3D模型时&#xff0c;可能会遇到模型不够平滑的情况&#xff0c;这会影响到最终的渲染效果和视觉体验。本文将探讨在此情况下应该如何解决&#xff0c;帮助读者更好地处理这一常见的问题。 一、检查SU模型细分程度 首先要检查的是原始的SU模型的细分程度。在S…

Python爬虫项目实战:百度任意图片抓取

大家好&#xff0c;我是南枫&#xff0c;这篇文章我将给大家介绍如何使用Python爬虫来达到想爬哪个明星图片就能爬下来的效果&#xff0c;那我们接下来看看如何实现的吧。 导入Python的requests库和re库。requests库用于发送HTTP请求&#xff0c;而re库用于处理正则表达式。 通…

鸿蒙知识点总结

1 Stage模型应用程序包结构 在开发态&#xff0c;一个应用包含一个或者多个Module&#xff0c;可以在DevEco Studio工程中创建一个或者多个Module。Module是HarmonyOS应用/服务的基本功能单元&#xff0c;包含了源代码、资源文件、第三方库及应用/服务配置文件&#xff0c;每一…

5款好用的AI写作软件,一键生成高质量文章

在当今信息快速发展的时代&#xff0c;AI写作软件逐渐成为创作者们的得力助手。它们能够凭借先进的技术和算法&#xff0c;一键生成高质量的文章&#xff0c;为创作者们节省大量的创作时间和精力。以下是5款备受好评的AI写作软件&#xff0c;下面在本文中分享给大家&#xff0c…

SpringBoot中注解@RestController | @ResponseBody | @Controller

ResponseBody 可以修饰类和方法 Controller 和 RestController 只能修饰类 RestController 告诉Spring&#xff0c;帮我们管理这个代码&#xff0c;我们后续访问时&#xff0c;才能访问到 RequestMapping 路由映射&#xff0c;可以修饰方法&#xff0c;也可以修饰类 访问地址…

蓝桥杯单片机-国赛6——第13届国赛主观题

0.比赛真题 1. 编程心得 DAC输出需要放到while循环里&#xff0c;一直持续的输出才能检测到稳定电压涉及锁存器5的部分&#xff1a;relay、buzz、motor……等不要放到while循环里&#xff0c;会造成蜂鸣器暴鸣。而是应该写一个带形参的函数&#xff0c;直接进行调用led的刷新&a…

作业-day-240527

Cday1思维导图 定义自己的命名空间my_sapce&#xff0c;在my_sapce中定义string类型的变量s1&#xff0c;再定义一个函数完成对字符串的逆置 #include <iostream>using namespace std;namespace my_space {string s1"abc123";string recover(string s){int i0…