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

setup函数子传父普通写法

父组件

<template><div><p>接收的数据: {{ receivedData }}</p><Demo4Chiren2 @custom-event="handleGetWeb" /></div>
</template><script>
import { ref } from 'vue';
import Demo4Chiren2 from './demo4Chiren2.vue';export default {components: { Demo4Chiren2 },setup() {const receivedData = ref(null);const handleGetWeb = (data) => {console.log(data); // 这里打印接收到的数据receivedData.value = data;};return {handleGetWeb, receivedData};}
}
</script>

子组件

记住一定要在setup哪里标上{emit},不然要报错,我搞了半天才晓得。很奇怪的一点,我看别人视频上,就没写{emit}就可以用,但是我为什么要

<template><div><button @click="sendData">发送数据</button></div>
</template><script>
import { defineComponent } from 'vue';export default defineComponent({setup(props, { emit }) {const sendData = () => {const data = { message: 'Hello from Demo4Chiren2' };emit('custom-event', data);};return { sendData };}
});
</script>

vue3中setup函数子传父普通写法,子暴露,以及自己踩过的坑

子组件:一定要return,还有它暴漏的方式还不一样。

<template><div><button @click="sendData">发送数据</button></div>
</template><script>
import { defineComponent, ref } from 'vue';export default defineComponent({setup(props, { emit }) {const sendData = () => {const data = {message: 'Hello from Demo4Chiren2'};emit('custom-event', data);};const exposedData = ref("我是子暴露的数据");const sayHi = () => {return "我是子暴露的方法被调用返回的结果";};return {sendData, exposedData, sayHi};},expose: ['exposedData', 'sayHi']
});
</script>

父组件

<template><div><h1>父组件</h1><Demo4Chiren2 @custom-event="handleCustomEvent" ref="demoChild" /><button @click="callChildMethod">调用子组件方法</button><p>子组件数据: {{ childData }}</p></div>
</template><script>
import { defineComponent, ref } from 'vue';
import Demo4Chiren2 from './Demo4Chiren2.vue'; // 请根据实际路径调整export default defineComponent({components: {Demo4Chiren2},setup() {const demoChild = ref(null);const childData = ref('');const handleCustomEvent = (data) => {console.log('接收到子组件数据:', data);childData.value = data.message;};const callChildMethod = () => {if (demoChild.value) {console.log(demoChild.value.sayHi());}};return {demoChild,childData,handleCustomEvent,callChildMethod};}
});
</script>

相关文章:

setup函数子传父普通写法

父组件 <template><div><p>接收的数据: {{ receivedData }}</p><Demo4Chiren2 custom-event"handleGetWeb" /></div> </template><script> import { ref } from vue; import Demo4Chiren2 from ./demo4Chiren2.vue…...

seafaring靶场漏洞测试攻略

步骤一&#xff1a;打开网页 一&#xff1a;sql注入漏洞 步骤一&#xff1a;测试回显点 -1 union select 1,2,3# 步骤二&#xff1a;查看数据库 -1 union select 1,2,database()# 步骤三&#xff1a;查看表名 -1 union select 1,2,group_concat(table_name) from informati…...

简单示例,搞懂PowerBI的ALL(),ALLEXCEPT()和ALLSELECTED()的区别

假设我们有如下数据&#xff0c;我们来统计下各班级的人数 我们在报表页里加上 班级’二班‘ 的筛选条件&#xff0c;此时PowerBI已经自动为我们显示了各班级人数&#xff1a;一班有3人&#xff0c;二班有1人。 根据我们的筛选条件&#xff0c;我们的统计人数应该是按照筛选器&…...

Collection

java.util.Collections:是集合工具类 作用&#xff1a;Collections不是集合&#xff0c;而是集合的工具类 常用API addAll package Collections;import java.util.ArrayList; import java.util.Collections;public class CollectionsDemo {public static void main(String[]…...

19章 泛型

1.修改程序清单19-1中的GenericStack类&#xff0c;使用数组而不是ArrayList来实现它。你应该在给栈添加新元素之前检查数组的大小如果数组满了&#xff0c;就创建一个新数组。该数组是当前数组大小的两倍&#xff0c;然后将当前数组的元素复制到新数组中。 public class Gene…...

基于python+django+mysql+Nanodet检测模型的水稻虫害检测系统

博主介绍&#xff1a; 大家好&#xff0c;本人精通Java、Python、C#、C、C编程语言&#xff0c;同时也熟练掌握微信小程序、Php和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我有丰富的成品Java、Python、C#毕设项目经验&#xff0c;能够为学生提供各类…...

计算机网络27、28——Linux命令1、2

1、虚拟机网络前方路径内容 用户名机器名&#xff1a;/$ $表示普通用户&#xff0c;#表示root用户 2、Linux不分盘&#xff0c;都是绝对路径 /表示根目录&#xff0c;表示计算机文件夹下 ~是当前用户的家&#xff0c;表示home文件夹下自己的文件夹 3、bin文件夹下的是可执…...

【Python深度学习】逆强化学习(IRL):通俗揭开学习背后的奥秘

逆强化学习:揭开学习背后的奥秘 1. 引言 当我们谈论人工智能(AI)时,很多人第一时间会想到强化学习。强化学习是一种让智能体通过与环境的互动,逐渐学习到如何做出最优决策的学习方法。然而,有一种更加神奇的学习方式叫做 逆强化学习(Inverse Reinforcement Learning,…...

Linux:五种IO模型

1&#xff1a;五种IO模型 1&#xff1a;阻塞IO 阻塞IO: 在内核将数据准备好之前,系统调用会一直等待.所有的套接字,默认 都是阻塞方式。 2&#xff1a;非阻塞 IO 非阻塞 IO: 如果内核还未将数据准备好, 系统调用仍然会直接返回, 并且返回EWOULDBLOCK 错误码。 非阻塞 IO 往往需…...

ansible企业实战

ansible最佳实践 优化ansible速度 开启SSH长连接 修改 /etc/ansible/ansible.cfg里面的参数 ssh_args -C -o ControlMasterauto -o ControlPersist5d ControlPersist5d这个参数是设置整个长连接保持时间设置为5天&#xff0c;如果开启&#xff0c;通过SSH连接过的设备都会…...

面向对象程序设计之模板进阶(C++)

在之前我出过一篇博客介绍了模版的初阶:面向对象程序设计(C)模版初阶&#xff0c;接下来我们将进行模版的进阶学习&#xff0c;介绍关于更多模版的知识 1.非类型模版参数 模板参数分类类型形参与非类型形参 类型形参即&#xff1a;出现在模板参数列表中&#xff0c;跟在class或…...

电巢科技携Ecosmos元宇宙产品亮相第25届中国光博会

第25届中国国际光电博览会&#xff08;“CIOE中国光博会”&#xff09;今日在深圳国际会展中心盛大开幕。本届博览会以“光电引领未来&#xff0c;驱动应用创新”为主题&#xff0c;吸引了全球超过3700家优质光电企业参展&#xff0c;展示了光电产业的最新成果和前沿技术。 电…...

Redis 入门 - 收官

《Redis 入门》系列文章总算完成了&#xff0c;希望这个系列文章可以想入门或刚入门的同学提供帮助&#xff0c;希望能让你形成学习Redis系统性概念。 当时为什么要写这个系列文章&#xff0c;是因为我自己就是迷迷糊糊一路踩坑走过来的&#xff0c;我踩完的坑就踩完了&#x…...

Windows技术栈企业基础底座(1)-为基于Windows的Nginx安装证书

企业的基础环境是一个组织的信息化数字化底座。传统企业基础环境多种系统&#xff0c;应用交杂&#xff0c;多种技术栈使得深入运维成本极大&#xff0c;且人员知识技能较难复用&#xff0c;造成资源浪费。本系列旨在尝试推动这一理念, 建立Windows, 或linux聚焦的技术栈的企业…...

ThreeJS入门(002):学习思维路径

查看本专栏目录 - 本文是第 002篇入门文章 文章目录 如何使用这个思维导图 Three.js 学习思维导图可以帮助你系统地了解 Three.js 的各个组成部分及其关系。下面是一个简化的 Three.js 学习路径思维导图概述&#xff0c;它包含了学习 Three.js 的主要概念和组件。你可以根据这个…...

基于ssm+vue+uniapp的新生报到系统小程序

开发语言&#xff1a;Java框架&#xff1a;ssmuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;M…...

掌握 JavaScript ES6+:现代编程技巧与模块化实践

掌握 JavaScript ES6&#xff1a;现代编程技巧与模块化实践 一 . 变量声明 let二 . 声明常量 const三 . 模板字符串四 . 函数的参数默认值五 . 箭头函数六 . 对象初始化七 . 解构7.1 接收 JSON 对象7.2 接收数组 八 . 延展操作符九 . 导入和导出9.1 方式一9.2 方式二 这篇文章我…...

AttackGen - AI 网络安全事件响应测试工具,附下载链接

为了提高我们团队在安全活动中的响应效率&#xff0c;我关注到了一款叫 AttackGen 的工具&#xff0c;我们需要的是一个既能快速生成场景又能准确反映现实威胁的工具。 在红蓝对抗中&#xff0c;我们经常要模拟各种攻击场景&#xff0c;以测试我们的防御水平。这不仅仅是为了“…...

CAD2020安装方法

文章目录 下载安装包打开压缩包打开文件夹打开CAD2020文件夹双击运行Setup.exe点击安装选择我接受 点击下一步路径默认点击安装等待加载完成安装完成点击立即启动点击OK点击输入序列号点击我同意点击激活输入序列号和 产品钥密点击下一步选择我具有 Autodesk 提供的激活码以管理…...

ubuntu安装mongodb实操学习

一、系统环境 ubuntu 22.04 寻找合适的仓库 经过浏览器里搜索MongoDB Repositories发现这个目录下面有完整的安装包 二、添加到apt&#xff0c;并安装 1、wget -qO - https://www.mongodb.org/static/pgp/server-6.0.asc | tee /etc/apt/trusted.gpg.d/server-6.0.asc 获取公…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期&#xff0c;让读者对此有深刻印象。 目录 ​…...

LLaMA-Factory 微调 Qwen2-VL 进行人脸情感识别(二)

在上一篇文章中,我们详细介绍了如何使用LLaMA-Factory框架对Qwen2-VL大模型进行微调,以实现人脸情感识别的功能。本篇文章将聚焦于微调完成后,如何调用这个模型进行人脸情感识别的具体代码实现,包括详细的步骤和注释。 模型调用步骤 环境准备:确保安装了必要的Python库。…...

自然语言处理——文本分类

文本分类 传统机器学习方法文本表示向量空间模型 特征选择文档频率互信息信息增益&#xff08;IG&#xff09; 分类器设计贝叶斯理论&#xff1a;线性判别函数 文本分类性能评估P-R曲线ROC曲线 将文本文档或句子分类为预定义的类或类别&#xff0c; 有单标签多类别文本分类和多…...

多元隐函数 偏导公式

我们来推导隐函数 z z ( x , y ) z z(x, y) zz(x,y) 的偏导公式&#xff0c;给定一个隐函数关系&#xff1a; F ( x , y , z ( x , y ) ) 0 F(x, y, z(x, y)) 0 F(x,y,z(x,y))0 &#x1f9e0; 目标&#xff1a; 求 ∂ z ∂ x \frac{\partial z}{\partial x} ∂x∂z​、 …...