vue3中的组件通信

props通信

可以实现父子组件通信,props数据还是只读的!!!

<template><div class="box"><h1>props:我是父组件曹操</h1><hr /><Child info="我是曹操" :money="money"></Child></div>
</template><script setup lang="ts">
//props:可以实现父子组件通信,props数据还是只读的!!!
import Child from "./Child.vue";
import { ref } from "vue";
let money = ref(10000);
</script><style scoped>
.box {width: 100vw;height: 400px;background: yellowgreen;
}
</style>
<template><div class="son"><h1>我是子组件:曹植</h1><p>{{ props.info }}</p><p>{{ props.money }}</p><!--props可以省略前面的名字---><p>{{ info }}</p><p>{{ money }}</p><button @click="updateProps">修改props数据</button></div>
</template><script setup lang="ts">
//需要使用到defineProps方法去接受父组件传递过来的数据
//defineProps是Vue3提供方法,不需要引入直接使用
let props = defineProps(["info", "money"]); //数组|对象写法都可以
// let props = defineProps({
//   info:{
//    type:String,//接受的数据类型
//    default:'默认参数',//接受默认数据
//   },
//   money:{
//    type:Number,
//    default:0
// }}); // 对象写法
// 这里的props只是一个代理项,在模板中使用时是可以省略的。
//按钮点击的回调
const updateProps = () => {// props.money+=10;  props:只读的console.log(props.info);
};
</script><!-- <script>
export default {props: ["info", "money"]
};
// 这里是vue2选择式api的写法,vue3都用上面那个组合式api的写法。
</script> --><style scoped>
.son {width: 400px;height: 200px;background: hotpink;
}
</style>

自定义事件

<template><div><h1>事件</h1><!-- 原生DOM事件 --><pre @click="handler">大江东去浪淘尽,千古分流人物</pre><button @click="handler1(1, 2, 3, $event)">点击我传递多个参数</button><hr /><!--vue2框架当中:这种写法自定义事件,可以通过.native修饰符变为原生DOM事件vue3框架下面写法其实即为原生DOM事件vue3:原生的DOM事件不管是放在标签身上、组件标签身上都是原生DOM事件--><Event1 @click="handler2"></Event1><hr /><!-- 绑定自定义事件xxx:实现子组件给父组件传递数据 --><Event2 @xxx="handler3" @click="handler4"></Event2></div>
</template><script setup lang="ts">
//引入子组件
import Event1 from "./Event1.vue";
//引入子组件
import Event2 from "./Event2.vue";
//事件回调--1
const handler = event => {// 原生DOM事件,会向事件回调注入事件对象//默认就是event,即为事件对象console.log(event);
};
//事件回调--2
const handler1 = (a, b, c, $event) => {console.log(a, b, c, $event);
};
//事件回调---3
const handler2 = () => {console.log(123);
};
//事件回调---4
const handler3 = (param1, param2) => {console.log(param1, param2);
};
//事件回调--5
const handler4 = (param1, param2) => {console.log(param1, param2);// alert("123");
};
</script><style scoped></style>
<template><div class="son"><p>我是子组件1</p><button>点击我也执行</button></div>
</template><script setup lang="ts"></script><style scoped>
.son{width: 400px;height: 200px;background: skyblue;
}
</style>
<template><div class="child"><p>我是子组件2</p><button @click="handler">点击我触发自定义事件xxx</button><button @click="$emit('click', 'AK47', 'J20')">点击我触发自定义事件click</button></div>
</template><script setup lang="ts">
//利用defineEmits方法返回函数触发自定义事件
//defineEmits方法不需要引入直接使用
let $emit = defineEmits(["xxx", "click"]);
//按钮点击回调
const handler = () => {//第一个参数:事件类型 第二个|三个|N参数即为注入数据$emit("xxx", "东风导弹", "航母");
};
</script><style scoped>
.child {width: 400px;height: 200px;background: pink;
}
</style>

在vue框架中,事件分为两种:原生的DOM事件,自定义事件。
原生的DOM事件可以让用户与网页进行交互,比如:click、dbclick、change、mouseenter、mouseleave…
自定义事件可以实现子组件给父组件传递数据。

原生DOM事件

<pre @click="handler">我是祖国的老花骨朵</pre><div @click="handler1(1,2,3,$event)">我要传递多个参数</div>

当前代码级给pre标签绑定原生DOM事件点击事件,默认会给事件回调注入event事件对象。点击事件也可以注入多个参数。
**切记:**注入的事件对象务必叫做$event。
在vue3框架中,click、dbclick、change(这类原生DOM事件),不管是在标签、自定义标签上(组件标签)都是原生DOM事件。
但在vue2中,组件标签需要通过.native修饰符才能变为原生DOM事件。

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

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

相关文章

Redis的缓存穿透、击穿、雪崩

目录 缓存穿透 定义&#xff1a; 解决方法&#xff1a; 缓存击穿 定义&#xff1a; 解决方案&#xff1a; 缓存雪崩 定义&#xff1a; 解决方案&#xff1a; 缓存穿透、缓存击穿和缓存雪崩的区别 缓存穿透 定义&#xff1a; 查询一个不存在的数据&#xff0c;数据库未…

探索802.1X:构筑安全网络的认证之盾

在现代网络安全的世界里&#xff0c;有一个极其重要但又常常被忽视的角色&#xff0c;它就是802.1x认证协议。这个协议可以被称作网络安全的守护者&#xff0c;为我们提供了强有力的防护。今天&#xff0c;我们就来深入探讨一下802.1x的原理、应用和测试&#xff0c;看看它是如…

[000-01-022].第09节:RabbitMQ中的消息分发策略

我的后端学习大纲 RabbitMQ学习大纲 1.不公平分发&#xff1a; 1.1.什么是不公平分发&#xff1a; 1.在最开始的时候我们学习到 RabbitMQ 分发消息采用的轮训分发&#xff0c;但在某种场景下这种策略并不是很好&#xff0c;比方说有两个消费者在处理任务&#xff0c;其中有个…

卷积算子的介绍

在卷积神经网络&#xff08;CNN&#xff09;中&#xff0c;卷积算子&#xff08;或称为卷积核、滤波器&#xff09;是一个用于特征提取的重要工具。以下是对卷积算子及其用途的详细解释&#xff1a; 卷积算子是什么&#xff1f; 卷积算子是一个小矩阵&#xff08;通常为二维&…

js 实现对一个元素得拉伸

前言&#xff1a; 最近写一个项目遇到了需要拉伸调整一个元素得大小&#xff08;宽高&#xff09;。所以打算实现一下。 思路就是用 mousedown、mousemove、mouseup 来实现。 mousemove是动态获取坐标&#xff0c;然后 动态改变元素宽度 js自己实现&#xff1a; html里实现…

平衡编码与学习:程序员的自我提升之道

在这个快速迭代的编程世界里&#xff0c;程序员面临着双重挑战&#xff1a;一方面需要高效地完成日常编码任务&#xff0c;另一方面又必须不断学习新技术和深化专业知识以应对日益复杂的项目需求。如何在繁忙的工作和个人成长之间找到平衡点&#xff0c;是许多程序员共同面临的…

使用html-docx-js + fileSaver实现前端导出word

因为html-docx-js是16年的老库了&#xff0c;它代码里面用到的with语法现在严格模式不允许&#xff0c;用npm直接引入会报错&#xff0c;所以我们需要用其它方式引入 首先要将html-docx-js的代码放到项目中 html-docx-js/dist/html-docx.js at master evidenceprime/html-do…

Coze插件发布!PDF转Markdown功能便捷集成,打造你的专属智能体

近日&#xff0c;TextIn开发的PDF转Markdown插件正式上架Coze。 在扣子搜索“pdf转markdown”&#xff0c;或在Coze搜索“pdf2markdown” 即可找到插件&#xff0c;在你的专属智能体中便捷使用文档解析功能。 如果想测试解析插件在你需要的场景下表现如何&#xff0c;可以直接…

网络安全之xss靶场练习

目录 一、xss靶场练习 1、Ma Spaghet! 2、Jefff 第一个方法 第二个方法 3、Ugandan Knuckles 4、Ricardo Milos 5、Ah Thats Hawt 6、Ligma 7、Mafia​编辑 8、Ok, Boomer 一、xss靶场练习 靶场地址 https://xss.pwnfunction.com/ 页面显示如下 1、Ma Spaghet! 分析…

linux 你会配置静态路由吗?

1. centos 1. 配置静态路由 运行在openstack的虚拟机有多网卡的承载不同的物理平面的网络&#xff0c;比如业务网、管理网、存储网等。但是默认路由只有一条&#xff0c;所以只能通过静态路由来指定路由。 for example&#xff1a; 虚拟机eth0是管理网&#xff1a;10.0.43.0/…

【ARM 芯片 安全与攻击 5 -- 测信道攻击(Side-channel Attack)】

文章目录 什么是测信道攻击?测信道攻击在 ARM 架构中的设计与应用电源分析攻击(Power Analysis Attack)DPA 攻击示例时间分析攻击(Timing Attack)时间分析攻击示例缓存侧信道攻击(Cache Side-channel Attack)Flush+Reload 攻击示例应对测信道攻击的防御措施Summary什么是…

谈一谈数据虚拟化的技术核心和应用架构

数据虚拟化&#xff08;Data Virtualization&#xff09;是对数据资源的抽象&#xff0c;通过屏蔽数据资源的存储位置和访问方式&#xff0c;能够将不同数据源、不同格式的数据资源&#xff0c;进行逻辑上的整合集成。这一技术方案与过去面对传统数仓的弊端&#xff0c;业界过去…

板子电源接线

目的 就是电源接板子时&#xff0c;分清正负 过程 AC、交流电 没有正负 分火线和0线 AC-L 交流火线 AC-N 交流0线 FG&#xff1a;接的是大地 G&#xff1a;是直流输出的地 U&#xff1a;表示的是电压 DC是直流正&#xff0c;DC-是直流负 2个AC是接交流的&#xff0c;一般是左…

免费的真是太香了!Chainlit接入抖音 Coze AI知识库接口快速实现自定义用户聊天界面

前言 由于Coze 只提供了一个分享用的网页应用&#xff0c;网页访问地址没法自定义&#xff0c;虽然可以接入NextWeb/ChatGPT web/open webui等开源应用。但是如果我们想直接给客户应用&#xff0c;还需要客户去设置配置&#xff0c;里面还有很多我们不想展示给客户的东西怎么办…

源代码一定要加密!10款超级好用的源代码加密软件排行榜

在当今高度竞争的商业环境中&#xff0c;源代码不仅是软件产品的基础&#xff0c;更是企业的核心资产之一。保护源代码免受未经授权的访问和盗窃至关重要。为此&#xff0c;许多企业采用源代码加密软件来为这一重要资产增加额外的安全层。以下是2024年企业通用的十大源代码加密…

SNMP入门笔记

简介 SNMP是英文"Simple Network Management Protocol"的缩写&#xff0c;中文意思是"简单网络管理协议"。SNMP是一种简单网络管理协议&#xff0c;它属于TCP/IP五层协议中的应用层协议&#xff0c;用于网络管理的协议。SNMP主要用于网络设备的管理。由于…

session、cookie、token概念介绍

一、Cookie 1、cookie介绍 Cookie是网站为了辨别用户身份而储存在用户本地终端&#xff08;Client Side&#xff09;上的小型文本文件。 作用&#xff1a;Cookie主要用于保存用户登录信息、浏览记录等&#xff0c;以便用户再次访问时能够自动识别并提供个性化服务。存储位置…

汽车电子 -- python脚本组包软件版本号

python脚本组包软件版本号 import pandas as pd import click import os import datetimedef cmdGetSwInfo():targetFilePath ../APP.htargetKeyWord #definetargetProgType PROJECT_TYPEtargetSoftware SOFTWARE_VERSIONtargetVersionInfo VERSION_INFO fileRead …

SEO优化:如何优化自己的文章,解决搜索引擎不收录的问题

可以使用bing的URL检查&#xff0c;来检查自己的文章是不是负荷收录准测&#xff0c;如果页面有严重的错误&#xff0c;搜索引擎是不会进行收录的&#xff0c;而且还会判定文章为低质量文章&#xff01; 检查是否有问题。下面的页面就是有问题&#xff0c;当然如果是误报你也可…

【与C++的邂逅】--- 类和对象(上)

Welcome to 9ilks Code World (๑•́ ₃ •̀๑) 个人主页: 9ilk (๑•́ ₃ •̀๑) 文章专栏&#xff1a; 与C的邂逅 本篇博客将讲解C中的类和对象&#xff0c;C是面向对象的语言&#xff0c;面向对象三大特性是封装,继承,多态。学习类和对象&#xff0c;我们可…