vue3 <script setup> 形式父子组件传值

一、父子组件传值

在Vue 3中,选项式api风格下父子组件传值可以通过props进行父组件向子组件传递数据,通过自定义事件($emit)实现子组件向父组件传递数据。但是组合式api风格下有所不同。

1、父组件向子组件传值

父组件通过:parentData="parentData"将数据传递给子组件,并通过@childEvent="handleChildEvent"监听子组件触发的事件。
在使用 <script setup> 的单文件组件中,props 可以使用 defineProps() 宏来声明
<template><ChildComponent :parentData="parentData" @childEvent="handleChildEvent" />
</template><script setup>import { ref } from 'vue';import ChildComponent from './ChildComponent.vue';const parentData = ref('父组件数据');const handleChildEvent = (data) => {console.log('子组件触发的事件,传递的数据:', data);};
</script>

2、子组件向父组件传值

子组件通过sendToParent函数使用$emit触发childEvent事件,并传递数据给父组件。
在使用 <script setup> 的单文件组件中,$emit 可以使用 defineEmits() 宏来声明,会返回一个相同作用的函数供我们使用
<template><div><p>{{ parentData }}</p><button @click="sendToParent">发送到父组件</button></div>
</template><script setup>
import { defineProps, defineEmits } from 'vue';const props = defineProps({parentData: String
});const emit = defineEmits(['childEvent']);const sendToParent = () => {emit('childEvent', '子组件数据');
};
</script>

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

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

相关文章

【pkuseg】由于网络策略组织下载请求,因此直接在github中下载细分领域模型medicine

【pkuseg】由于网络策略组织下载请求&#xff0c;因此直接在github中下载细分领域模型medicine 写在最前面解决方案pkuseg是什么&#xff1f;报错原因报错详情 &#x1f308;你好呀&#xff01;我是 是Yu欸 &#x1f30c; 2024每日百字篆刻时光&#xff0c;感谢你的陪伴与支持…

黏土滤镜制作方法:探索黏土特效制作的魅力

在数字时代&#xff0c;图像处理已经成为我们生活的一部分&#xff0c;无论是社交媒体上的照片分享&#xff0c;还是专业设计领域的创作&#xff0c;都离不开对图像的精心处理。而黏土滤镜&#xff0c;作为一种独特而富有艺术感的图像处理效果&#xff0c;受到了越来越多人的喜…

时序分解 | Matlab实现LMD局域均值分解

时序分解 | Matlab实现LMD局域均值分解 目录 时序分解 | Matlab实现LMD局域均值分解效果一览基本介绍程序设计参考资料 效果一览 基本介绍 时序分解 | Matlab实现LMD局域均值分解 Matlab语言 1.算法新颖小众&#xff0c;用的人很少&#xff0c;包含分解图 2.直接替换数据即可用…

带头单链表 C++实现

节点定义 带头单链表&#xff1a;我们只需要一个结点指针指向整个链表的第一个节点&#xff0c;这样我们就可以通过next指针访问整个链表内的所有节点 template<class T> struct ListNode {T _val;ListNode* _next;ListNode(const T &val):_val(val),_next(nullptr){…

【C++】继承(菱形继承的深入理解)

在本篇博客中&#xff0c;作者将会带领你深入的理解C中的继承。 注意&#xff01;&#xff01;&#xff01;本篇博客是在32位机器下进行讲解的&#xff0c;64位下会有所不同&#xff0c;但大同小异。 一. 继承的概念及定义 继承的概念 什么是继承&#xff1f;为什么要有继承&…

使用Android数据恢复恢复已删除的文件[Windows]

智能手机或平板电脑等 Android 设备为用户提供了发送、接收、处理和存储各种数据的能力。它提供了传统手机无法实现的多功能性和简化功能。即便如此&#xff0c;您管理存储在安卓设备中的数据的方式完全取决于您。如果您的手机出现问题&#xff0c;例如系统崩溃或操作系统更新失…

Vellum for Mac v3.7.2激活版:一键创建,轻松出版

还在为繁琐的电子书制作流程而烦恼吗&#xff1f;Vellum for Mac&#xff0c;让您的电子书创作变得轻松简单&#xff01;支持多种格式导入&#xff0c;自动构建书籍内容&#xff0c;无需担心排版和格式问题。丰富的编辑和排版功能&#xff0c;让您的书籍更加精美。一键导出多种…

Ant设计理念学习记录

1 AntV &#xff08;1&#xff09;节点展示&#xff1a; 异常/正常节点颜色区分&#xff1b;可以对节点进行归类&#xff0c;combo方式。 &#xff08;2&#xff09;节点交互&#xff1a;比如点击某个tab之后&#xff0c;当前节点可以高亮&#xff0c;并且与之关联的边也高亮…

初始JSVMP

1.初始JSVMP JSVMP是"JavaScript Virtual Machine Protection"的缩写&#xff0c;是一种前端代码虚拟化保护技术。它的核心思想是在JavaScript代码保护过程中引入代码虚拟化&#xff0c;将目标代码转换成自定义的字节码&#xff0c;这些字节码只有特殊的解释器才能识…

Linux无root配置Node,安装nvm

1. 安装NVM&#xff1a; curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash # 或者&#xff0c;如果你使用wget wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash 对于bash用户&#xff0c;可以运行&…

力扣Hot100-T8无重复字符的最长子串(经典)

&#xff08;难度&#xff1a;中等&#xff09;给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长 子串 的长度。 示例 1: 输入: s "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc"&#xff0c;所以其长度为 3。示例 2: …

k8s kubectl 常用yaml

存储挂载pvc apiVersion: v1 kind: Pod metadata:name: hw-mountnamespace: cnoc-hw-storage#namespace: project-10321 spec:# nodeSelector:# csi.storage.k8s.io/lvm: "true"# nodeName: 10-10-10-10.hw# schedulerName: lvm-schedulercontainers:- name: busybo…

ollama离线安装,在CPU运行它所支持的哪些量化的模型

在线安装的链接: Download Ollama on LinuxGet up and running with large language models.https://ollama.com/download/linux 离线安装教程: 下载install.sh: https://ollama.ai/install.sh

2024OD机试卷-整型数组按个位值排序(java\python\c++)

题目:整型数组按个位值排序 题目描述 给定一个非空数组(列表),其元素数据类型为整型,请按照数组元素十进制最低位从小到大进行排序,十进制最低位相同的元素,相对位置保持 当数组元素为负值时,十进制最低位等同于去除符号位后对应十进制值最低位。 输入描述 给定一个…

26.使用CMake和CTest组织工程测试

文章目录 使用CMake和CTest组织工程测试软件测试CMake中如何组织测试测试属性使用CTestreference 欢迎访问个人网络日志&#x1f339;&#x1f339;知行空间&#x1f339;&#x1f339; 使用CMake和CTest组织工程测试 软件测试 软件相关的测试包括&#xff1a; 1.冒烟测试(S…

Java | Leetcode Java题解之第77题组合

题目&#xff1a; 题解&#xff1a; class Solution {List<Integer> temp new ArrayList<Integer>();List<List<Integer>> ans new ArrayList<List<Integer>>();public List<List<Integer>> combine(int n, int k) {List&l…

ES:聚合查询语法

基础查询结构&#xff1a; GET http://ip:prot/textbook/_search { "query" : { ...query子句... }, "aggs" : { "agg_name":{ "agg_type": { "agg_arg": agg_arg_value } } }, "sort" : { ..sor…

Tomcat7+ 弱口令 后台getshell漏洞

1 漏洞背景 Tomcat 是一个流行的开源Web应用服务器&#xff0c;用于部署和运行Java Web应用程序。Tomcat 7 版本中存在一个安全隐患&#xff0c;即默认的管理员密码可能较弱或者未被修改&#xff0c;攻击者可以利用这一漏洞登录到Tomcat的管理后台&#xff0c;并上传恶意的WAR…

二、使用插件一键安装HybridCLR

预告 本专栏将介绍如何使用这个支持热更的AR开发插件&#xff0c;快速地开发AR应用。 专栏&#xff1a; Unity开发AR系列 插件简介 通过热更技术实现动态地加载AR场景&#xff0c;简化了AR开发流程&#xff0c;让用户可更多地关注Unity场景内容的制作。 热更方案 基于Hybri…

ACAT2021纳新题(C语言)(旧)

ACAT2021纳新题&#xff08;C语言&#xff09; 前言说明&#xff1a;题目&#xff1a;1. 请分析下列代码的运行结果&#xff0c;并解释其原因。2&#xff0e;请分析下面函数的运行结果&#xff0c;并解释其原因。3&#xff0e;请分析下列代码的运行结果&#xff0c;并解释其原因…