vue3 #组件通信#子传父#defineEmits

news/发布时间2024/6/16 16:29:33

//在子组件中(son.vue)

<template>

    <h2>子组件</h2>

    <button @click = "handleClick"> 子组件触发 </button>

</template>

<script setup lang="ts">

cosnt emit = defineEmits( [ 'num' ] )

handleClick( () => {

    emit ('num' , 100)

} )

</scrpit>

//在父组件中

<template>

    <h1>父组件</h1>

    <Son  @num="handleNum" />

</template>

<script setup lang="ts">

import { ref } from 'vue'

import Son from './components/Son.vue'

const handleNum = ( val : number ) => {        

    console.log(val)      //val就是子组件传过来的数据

}

</script>

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

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

相关文章

解决ModuleNotFoundError: No module named ‘pysqlite2‘

目录 一、问题描述&#xff1a; 二、问题分析&#xff1a; 三、问题解决&#xff1a; 四、参考文章&#xff1a; 一、问题描述&#xff1a; 在重新安装的anaconda环境中自建了一个新虚拟环境&#xff0c;再安装完jupyter后&#xff08;pip install jupyter&#xff09;&am…

企业微信变更企业主体的流程

企业微信变更主体有什么作用&#xff1f;做过企业运营的小伙伴都知道&#xff0c;很多时候经常会遇到现有的企业需要注销&#xff0c;切换成新的企业进行经营的情况&#xff0c;但是原来企业申请的企业微信上面却积累了很多客户&#xff0c;肯定不能直接丢弃&#xff0c;所以这…

阿里开源低代码引擎 - Low-Code Engine

阿里开源低代码引擎 - Low-Code Engine 本文主要介绍如何在Windows运行/开发阿里开源低代码引擎 - Low-Code Engine 详细文档参见【 阿里开源低代码引擎 - Low-Code Engine 官方文档】 目录 阿里开源低代码引擎 - Low-Code Engine一、环境准备1、使用 WSL 在 Windows 上安装 L…

golang 监听ip数据包(golang纯享版)

golang 监听ip数据包(golang纯享版) 【注】本机编译运行平台为linux&#xff0c;如需测试代码请移至linux平台进行代码测试 本文以ip4 作为案例进行包抓取示范&#xff0c;ip6抓取与ip4方式异曲同工&#xff0c;可自行举一反三得出 第一步&#xff0c;通过wireshark抓包拿到…

Pytorch 配置 GPU 环境

1、Pytorch 深度学习跑代码的时候&#xff0c;因为简单的操作不适合cpu运行&#xff0c;我们更习惯用GPU加速代码。 本章将介绍怎么安装pytorch的gpu环境&#xff0c;以及常见的问题 关于conda的安装&#xff0c;参考之前文章&#xff1a;深度学习环境配置&#xff1a;Anaco…

121. 买卖股票的最佳时机

121. 买卖股票的最佳时机 原题链接&#xff1a;完成情况&#xff1a;解题思路&#xff1a;参考代码&#xff1a;_121买卖股票的最佳时机_贪心递推_121买卖股票的最佳时机_动态规划_01_121买卖股票的最佳时机_动态规划_02_121买卖股票的最佳时机_动态规划_一维数组 错误经验吸取…

Jmeter基础(1) Mac下载安装启动

目录 Jmeter下载安装启动下载启动 Jmeter下载安装启动 注意⚠️&#xff1a;使用jmeter需要有java环境 下载 官网下载地址&#xff1a;https://jmeter.apache.org/ 会看到这里有两个版本&#xff0c;那么有什么区别么&#xff1f; Binaries是可执行版&#xff0c;直接下载解…

Flink 深入理解任务执行计划,即Graph生成过程(源码解读)

深入理解Graph生成过程 1生成StreamGraph2生成JobGraph3生成ExecutionGraph&#xff1a;4生成物理执行图&#xff1a;5 批处理的物理执行计划同源实例的并行执行 我们先看一下&#xff0c;Flink 是如何描述作业的执行计划的。以这个 DataStream 作业为例&#xff0c;Flink 会基…

ChatGPT背后的创新之源:InstructGPT的详细解读~

Training language models to follow instructions with human feedback Note&#xff1a;InstructGPT作为ChatGPT的前身&#xff0c;他们的模型结构&#xff0c;训练方式都完全一致&#xff0c;即都是用了instrcut learning和RLHF指导模型学习。区别可能就是微调的元模型不同&…

Golang数据库编程详解 | 深入浅出Go语言原生数据库编程

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站https://www.captainbed.cn/kitie。 Golang学习专栏&#xff1a;https://blog.csdn.net/qq_35716689/category_12575301.html 前言 对数据库…

【算法 - 动态规划】最长回文子序列

上篇文章中&#xff0c;我们学习一个新的模型&#xff1a; 样本对应模型&#xff0c;该模型的套路就是&#xff1a;以结尾位置为出发点&#xff0c;思考两个样本的结尾都会产生哪些可能性 。 而前篇文章中的 纸牌博弈问题 属于 [L , R]上范围尝试模型。该模型给定一个范围&…

【4.2计算机网络】开放互连参考模型

目录 1.OSI七层模型介绍 1.OSI七层模型介绍 例题1. 解析&#xff1a;选B。A选项网桥也不能检测冲突只是能隔离冲突&#xff0c;C选项集线器是多端口中继器&#xff0c;多端口网桥是交换机。 例题二. 解析&#xff1a;选B。A集线器是物理层&#xff0c;C路由器是网络层&#x…

IDEA报错:无法自动装配。找不到 ... 类型的 Bean。

今天怎么遇见这么多问题。 注&#xff1a;似乎只有在老版本的IDEA中这个报错是红线&#xff0c;新版的IDEA就不是红线了&#xff08;21.2.2是红的&#xff09; 虽然会报错无法自动装配&#xff0c;但启动后仍能正常执行 不嫌麻烦的解决做法&#xff1a;Autowired的参数reques…

docker简介

Docker是一种用于开发、交付和运行应用程序的开放平台&#xff0c;通过使用容器技术&#xff0c;可以更加高效地打包和部署应用程序。 容器化技术&#xff1a; Docker使用容器化技术&#xff0c;允许开发人员将应用程序和其依赖项打包到一个称为容器的轻量级、可移植的环境中。…

成像光谱遥感技术中的AI革命:ChatGPT应用指南

遥感技术主要通过卫星和飞机从远处观察和测量我们的环境&#xff0c;是理解和监测地球物理、化学和生物系统的基石。ChatGPT是由OpenAI开发的最先进的语言模型&#xff0c;在理解和生成人类语言方面表现出了非凡的能力。重点介绍ChatGPT在遥感中的应用&#xff0c;人工智能在解…

HarmonyOS—@Observed装饰器和@ObjectLink嵌套类对象属性变化

Observed装饰器和ObjectLink装饰器&#xff1a;嵌套类对象属性变化 概述 ObjectLink和Observed类装饰器用于在涉及嵌套对象或数组的场景中进行双向数据同步&#xff1a; 被Observed装饰的类&#xff0c;可以被观察到属性的变化&#xff1b;子组件中ObjectLink装饰器装饰的状…

微服务day01-认识微服务与Eureka注册中心

一.什么是微服务&#xff1f; 微服务≠springcloud&#xff0c;是一种经过良好架构设计的分布式解决方案&#xff0c;微服务架构特征 单一职责&#xff1a;微服务拆分力度更小&#xff0c;每一个服务都对应唯一的业务能力&#xff0c;做到单一职责&#xff0c;避免重复业务开…

uniapp微信小程序解决上方刘海屏遮挡

问题 在有刘海屏的手机上&#xff0c;我们的文字和按钮等可能会被遮挡 应该避免这种情况 解决 const SYSTEM_INFO uni.getSystemInfoSync();export const getStatusBarHeight ()> SYSTEM_INFO.statusBarHeight || 15;export const getTitleBarHeight ()>{if(uni.get…

python+vue_django编程语言在线学习平台

本论文的主要内容包括&#xff1a; 第一&#xff0c;研究分析当下主流的web技术&#xff0c;结合学校日常管理方式&#xff0c;进行编程语言在线学习平台的数据库设计&#xff0c;设计编程语言在线学习平台功能&#xff0c;并对每个模块进行说明。 第二&#xff0c;陈列说明该系…

Linux 文件-基础IO

预备知识 文件内容属性 1 所有对文件的操作可分为两类&#xff1a;a 对内容操作 b 对属性操作 2 内容是数据&#xff0c;属性也是数据&#xff0c;存储文件必须既要存储内容&#xff0c;也要存储属性数据 默认文件在磁盘上 3 进程访问一个文件的时候&#xff0c;都要先把这…
推荐文章