Vue3 setup tsx 子组件向父组件传值 emit

需求:Vue3 setup 父组件向子组件传值,子组件接收父组件传入的值;子组件向父组件传值,父组件接收的子组件传递的值。

父组件:parent.tsx

import { defineComponent, ref, reactive } from 'vue';
import TotalPreview from './components/TotalPreview'export default defineComponent({name: 'parent',components: { TotalPreview },setup() {const count = ref(123);const childNum = reactive({ num: 1 });const onChildClick = (val: any) => {childNum.num = val;console.log('childNum',childNum); // 打印子组件向父组件传递的值};return () => (<><div><h1>父组件接收的子组件传递的值:{childNum.num}</h1><TotalPreview num={count.value} onNumClick={onChildClick} /></div></>);},
});

子组件:TotalPreview.tsx

import { defineComponent, ref } from 'vue';
import { Button } from 'ant-design-vue';export default defineComponent({name: 'Child',props: { num: Number },emits: ["numClick"],setup(props, { emit }) {const parentNum = ref(props.num)const count = ref(1);const onclick = () => {count.value++// emit 子组件向父组件传值emit('numClick', count.value);}return () => (<div><h1>{'父组件传递给子组件的值:'+parentNum.value}</h1><h1>{'子组件显示count值:'+count.value}</h1><Button onClick={onclick}>点击按钮改变子组件的值,并向父组件传值</Button></div>);},
});

页面效果:
在这里插入图片描述

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

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

相关文章

openCV使用c#操作摄像头

效果如下&#xff1a; 1.创建一个winform的窗体项目&#xff08;框架.NET Framework 4.7.2&#xff09; 2.Nuget引入opencv的c#程序包&#xff08;版本最好和我一致&#xff09; 3.后台代码 using System; using System.Collections.Generic; using System.ComponentModel;…

最小路径和——力扣64

文章目录 题目描述动态规划题目描述 动态规划 class Solution {public:int minPathSum(vector<vector<int>>

STM32 F103C8T6学习笔记1:开发环境与原理图的熟悉

作为一名大学生&#xff0c;学习单片机有一段时间了&#xff0c;也接触过嵌入式ARM的开发&#xff0c;但从未使用以及接触过STM32C8T6大开发使用&#xff0c;于是从今日开始&#xff0c;将学习使用它~ 本文介绍STM32C8T6最小系统开发环境搭建注意问题&#xff0c;STM32C8T6单片…

超详细,自动化测试实战-获取配置文件信息(实例源码)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 配置文件的类型 …

openGauss学习笔记-38 openGauss 高级数据管理-游标

文章目录 openGauss学习笔记-38 openGauss 高级数据管理-游标38.1 语法格式38.2 参数说明38.3 示例 openGauss学习笔记-38 openGauss 高级数据管理-游标 为了处理SQL语句&#xff0c;存储过程进程分配一段内存区域来保存上下文联系。游标是指向上下文区域的句柄或指针。借助游…

如何实现Vue路由的二级菜单

目录 Vue路由&#xff08;一、二级路由&#xff09; 一级路由配置 二级路由配置 Vue中展示二级路由的默认模块/二级路由默认显示 Vue路由&#xff0c;二级路由及跳转 如何用vue实现二级菜单栏 ◼️ 相关参考资料 当朋友们看到这个文章时想必是想要了解vue路由二级菜单相…

【javaweb】学习日记Day2 - JavaScript入门

目录 一、引入方式 1、内部脚本 2、外部脚本 二、基础语法 1、输出语句 2、定义变量类型 3、数据类型 4、运算符 &#xff08;1&#xff09;类型转换 5、函数 &#xff08;1&#xff09;方法一 &#xff08;2&#xff09;方法二 三、对象 1、Array数组 &#x…

ATRank: An Attention-Based User Behavior Modeling Framework for Recommendation

Abstract 异构用户行为 我们的模型考虑了【异构用户行为】,我们将所有类型的行为投射到多个潜在的语义空间中,在这些语义空间中,行为之间可以通过自关注产生影响。 异构用户行为(Heterogeneous User Behavior)指的是在一个系统、平台或社交网络中,不同用户在行为模式、兴…

【JavaWeb】实训的长篇笔记(下)

文章目录 八、功能实现1、注册功能2、登录功能3、问题说明4、首页数据显示5、后台管理 八、功能实现 1、注册功能 jsp&#xff1a;能够在页面中把数据动态化&#xff0c;jsp和html在元素标签上是无区别的&#xff0c;区别是html中写上java代码就成了jsp文件。filename.jsp。 需…

PPT颜色又丑又乱怎么办?

一、设计一套PPT时&#xff0c;可以从这5个方面进行设计 二、PPT颜色 &#xff08;一&#xff09;、PPT常用颜色分类 一个ppt需要主色、辅助色、字体色、背景色即可。 &#xff08;二&#xff09;、搭建PPT色彩系统 设计ppt时&#xff0c;根据如下几个步骤&#xff0c;依次选…

年之年的选择,组装版

组件&#xff1a;<!--* Author: liuyu liuyuxizhengtech.com* Date: 2023-02-01 16:57:27* LastEditors: wangping wangpingxizhengtech.com* LastEditTime: 2023-06-30 17:25:14* Description: 时间选择年 - 年 --> <template><div class"year-range-pick…

现代无人机技术

目录 1.发展 2.应用领域 3.对战争的影响 4.给人类带来的福利 5.给人类带来的坏处 1.发展 无人机的发展可以分为以下几个关键步骤&#xff1a; 1. 早期试验和研究&#xff1a;20世纪初&#xff0c;飞行器的概念开始出现&#xff0c;并进行了一些早期的试飞和实验。这些尝试包…