当前位置: 首页 > news >正文

Vue 3编写的父子组件示例,包括传递数据和调用父组件方法

下面是一个使用Vue 3编写的父子组件示例,包括传递数据和调用父组件方法:

ChildComponent.vue:

<template><div><p>Child Component</p><p>Message: {{ message }}</p><button @click="updateMessage">Update Message</button></div>
</template><script>
import { defineEmits, defineProps } from 'vue';export default {props: {initialMessage: {type: String,required: true}},emits: ['update:message'],setup(props, { emit }) {const message = defineProps({message: props.initialMessage});function updateMessage() {message.message = 'Hello Vue 3';emit('update:message', message.message);}return {message,updateMessage};}
}
</script>

在上面的代码中,我们定义了一个名为ChildComponent的子组件,并声明了一个名为initialMessage的props属性,它的类型为字符串,并且是必需的。我们还定义了一个名为update:message的自定义事件,用于将更新后的消息传递回父组件。

setup()函数中,我们使用defineProps()函数来创建一个响应式的message对象,并将其初始值设置为props.initialMessage。然后,我们定义了一个名为updateMessage()的方法,在点击按钮时将message.message更新为'Hello Vue 3',并通过调用emit()函数来触发update:message事件并将更新后的消息传递给父组件。

ParentComponent.vue:

<template><div><p>Parent Component</p><child-component :initial-message="message" @update:message="onUpdateMessage"></child-component><p>Updated Message: {{ updatedMessage }}</p></div>
</template><script>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';export default {components: {ChildComponent},setup() {const message = ref('Hello World');const updatedMessage = ref('');function onUpdateMessage(value) {updatedMessage.value = value;}return {message,updatedMessage,onUpdateMessage};}
}
</script>

在上面的代码中,我们定义了一个名为ParentComponent的父组件,并在模板中使用了<child-component>标签来引入子组件。我们将message属性绑定到子组件的initial-message属性上,并监听子组件触发的update:message事件来获取更新后的消息。

setup()函数中,我们使用ref()函数创建了两个响应式变量:messageupdatedMessage。我们还定义了一个名为onUpdateMessage()的方法,在子组件触发update:message事件时被调用,用于将更新后的消息保存到updatedMessage变量中。

这就是一个完整的父子组件示例,包括传递数据和调用父组件方法。

相关文章:

Vue 3编写的父子组件示例,包括传递数据和调用父组件方法

下面是一个使用Vue 3编写的父子组件示例&#xff0c;包括传递数据和调用父组件方法&#xff1a; ChildComponent.vue&#xff1a; <template><div><p>Child Component</p><p>Message: {{ message }}</p><button click"updateMes…...

[ 容器 ] Docker 的数据管理

目录 一、Docker 的数据管理1.1 数据卷2. 数据卷容器 二、 端口映射三、容器互联&#xff08;使用centos镜像&#xff09;四、Docker 镜像的创建1&#xff0e;基于现有镜像创建2&#xff0e;基于本地模板创建3&#xff0e;基于Dockerfile 创建3.1 联合文件系统&#xff08;Unio…...

【环境配置】使用Docker搭建LAMP环境

这篇文章不是介绍DOCKER是什么&#xff0c;也不是阐述DOCKER的核心&#xff1a;镜像/容器和仓库之间的关系,它只是一篇让刚刚接触DOCKER的初学者&#xff0c;在没有完全了解DOCKER是什么之前,也能尽快的在Linux系统下面通过DOCKER来搭建一个LAMP环境&#xff0c;这是其一&#…...

MLIR (Multi-Level Intermediate Representation)

MLIR&#xff08;Multi-Level Intermediate Representation&#xff09;是一种多级中间表示的编译器基础架构&#xff0c;旨在提供通用的、可扩展的编译器基础设施。它最初由谷歌开发&#xff0c;并且现在已经成为一个开源项目&#xff0c;受到广泛关注和采用。 MLIR 的设计理…...

VR全景在酒店的发展状况如何?酒店该如何做营销?

现阶段&#xff0c;VR全景技术已经被酒店、民宿、旅游景区、房产楼盘、校园等行业所应用&#xff0c;每天都有不少人通过VR全景展示来了解酒店的设施环境&#xff0c;而酒店也可以借此机会&#xff0c;详细展示自身优势&#xff0c;更大范围吸引顾客。 VR酒店拥有真实、立体的全…...

Winform使用PictureBox控件显示图片并且自适应

一.首先我们只需要在项目文件中的/bin/Debug 下面创建一个文件夹保存你的照片。我这里文件夹名字叫Resources.。如图&#xff1a; 二. 然后我们把我们的照片放入Resources文件夹中即可。如图&#xff1a; 三.在构造器中添加picturebox控件。如图&#xff1a; 四.我们到初始化代…...

HTML中的焦点管理

前言 焦点作为页面交互中的重要一环&#xff0c;涉及到的知识点也比较多&#xff0c;有必要做一个统一的总结。 HTML 中的可获取焦点的元素 具有 href 属性的 HTMLAnchorElement/HTMLAreaElement非禁用态的 HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLBut…...

如何区分接口测试和功能测试

接口测试和功能测试的区别&#xff1a; 2023最新Jmeter接口测试从入门到精通&#xff08;全套项目实战教程&#xff09; 本文主要分为两个部分&#xff1a; 第一部分&#xff1a;主要从问题出发&#xff0c;引入接口测试的相关内容并与前端测试进行简单对比&#xff0c;总结两者…...

limit分页查询

controller层 ApiOperation("员工分页查询")GetMapping("/page")public Result<PageResult> page(EmployeePageQueryDTO employeePageQueryDTO){log.info("员工分页查询&#xff0c;参数为{}",employeePageQueryDTO);PageResult pageResul…...

mysql null 值查询不出来问题

最新遇到mysql null 值查询的问题&#xff0c;当查询这个字段有的为null 有的不为null 该字段查询条件查询为null值得将不显示。 举例 新建表 test_user name和phone得值默认值为null 我们添加一些数据 查询下name 不是张三得数据 select * from test_user where name !张…...

面试之CurrentHashMap的底层原理

首先回答HashMap的底层原理? HashMap是数组链表组成。数字组是HashMap的主体&#xff0c;链表则是主要为了解决哈希冲突而存在的。要将key 存储到&#xff08;put&#xff09;HashMap中&#xff0c;key类型实现必须计算hashcode方法&#xff0c;默认这个方法是对象的地址。接…...

Error in onLoad hook: “ReferenceError: plus is not defined“ found in

项目场景&#xff1a; 项目背景如下所示&#xff1a; 使用 HBuilder X 开发 项目&#xff0c; 调整页面时&#xff0c;直接运行到 浏览器查看页面设置效果&#xff0c;导致控制台出现下述报错信息 例如&#xff1a; 问题描述 遇到的问题如下所示&#xff1a; APP 中接收数据…...

ansible自动化运维(二)剧本、角色编写实战

&#x1f618;作者简介&#xff1a;一名运维工作人员。 &#x1f44a;宣言&#xff1a;人生就是B&#xff08;birth&#xff09;和D&#xff08;death&#xff09;之间的C&#xff08;choise&#xff09;&#xff0c;做好每一个选择。 &#x1f64f;创作不易&#xff0c;动动小…...

【Spring框架】@Resource注入以及与@Autowired的区别

目录 使用Resource设置name的方式来重命名注入的对象区别 使用Resource设置name的方式来重命名注入的对象 package com;import org.springframework.context.ApplicationContext; import org.springframework.context.support.ClassPathXmlApplicationContext; import org.spr…...

FTP服务器的搭建和配置上传脚本

文章目录 前言一、配置本地用户可上传权限ftp服务器1、用户登录ftp 二、配置FTP上传脚本文件1.脚本代码如下 补充知识 前言 vsftpd&#xff08;Very Secure FTP Daemon&#xff09;是一个在 Linux/Unix 系统上运行的一款开源免费的 FTP 服务器软件。vsftpd 支持支持 匿名用户、…...

Ubuntu22.04上部署Lua开发环境

需求背景 想在Ubuntu22.04上搭建一下Lua的开发环境&#xff0c;其实步骤比较简单的&#xff0c;此文章也适用于Ubuntu主机环境搭建Lua,如果想在在Ubuntu内部署一个容器&#xff0c;然后在容器内搭建Lua的环境&#xff0c;可以先参考容器的创建过程 ubuntu22.04上如何创建有pri…...

React的hooks---自定义hooks

通过自定义 Hook&#xff0c;可以将组件逻辑提取到可重用的函数中&#xff0c;在 Hook 特性之前&#xff0c;React 中有两种流行的方式来共享组件之间的状态逻辑&#xff1a;render props和高阶组件&#xff0c;但此类解决方案会导致组件树的层级冗余等问题。而自定义 Hook 的使…...

Asp.Net 使用Log4Net (基础版)

Asp.Net 使用Log4Net (基础版) 1. 创建项目 创建ASP.NET Web Forms项目 在Visual Studio中创建一个新的ASP.NET Web Forms项目。命名为"Log4NetDemo"。 2.安装Log4Net包 打开NuGet包管理器控制台&#xff0c;并运行以下命令来安装Log4Net&#xff1a; mathemati…...

STM32 互补PWM 带死区 HAL

1、设置PWM波频率100KHz&#xff0c;占空比50%&#xff0c;死区时间1us 2、 while 循环之前启动PWM HAL_TIM_PWM_Start(&htim1, TIM_CHANNEL_1); //启动TIM1_CH1 PWM输出 HAL_TIMEx_PWMN_Start(&htim1,TIM_CHANNEL_1);//启动TIM1_CH1N PWM输出 3、死区计算 DT_time…...

20230721在WIN10下安装openssl并解密AES-128加密的ts视频切片

20230721在WIN10下安装openssl并解密AES-128加密的ts视频切片 2023/7/21 22:58 1、前言&#xff1a; AES-128加密的ts视频切片【第一个】&#xff0c;打开有时间限制的&#xff01; https://app1ce7glfm1187.h5.xiaoeknow.com/v2/course/alive/l_64af6130e4b03e4b54da1681?typ…...

AI-调查研究-01-正念冥想有用吗?对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...