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

前端组件化开发

假设这个页面是vue开发的,如果一整个页面都是编写在一个vue文件里面,后期不好维护,会特别的庞大,那么如何这个时候需要进行组件化开发。组件化开发后必然会带来一个问题需要进行组件之间的通信。组要是父子组件之间通信,非父子之间可以通过vuex或者pinia进行通信。

引用子组件的信息

import ChildComponent from './HelloWorld.vue';
<ChildComponent :message="parentMessage" />

父组件向子组件传递消息

<template><ChildComponent :message="parentMessage" />
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './HelloWorld.vue';const parentMessage = ref('Hello from Parent!');
</script>

子组件接收消息

<template><div>{{ message }}</div>
</template><script setup>
import { defineProps } from 'vue';//通过 defineProps 来接收父组件的消息
const props = defineProps({message: String
});
</script>

子组件向父组件发送消息

<template><button @click="sendMessageToParent">Send Message to Parent</button>
</template><script setup>
import { defineEmits } from 'vue';const emit = defineEmits(['message-to-parent']);const sendMessageToParent = () => {emit('message-to-parent', 'Hello from Child!');
};
</script>这段代码是使用 Vue 3 的 `Composition API` 编写的组件,主要展示了如何通过 `emit` 在子组件中向父组件发送消息。我们来逐步分析这段代码。### 1. `<template>` 部分```vue
<template><button @click="sendMessageToParent">Send Message to Parent</button>
</template>

这部分定义了组件的模板,包含了一个按钮。当用户点击这个按钮时,会触发 @click 事件,调用 sendMessageToParent 方法。这里的 @click 是 Vue 的事件绑定语法,它将按钮的点击事件与 sendMessageToParent 方法关联。

2. <script setup> 部分

<script setup> 是 Vue 3 中引入的简化写法,用于更简洁地定义组件的逻辑。所有在 setup 中定义的变量和函数可以直接在模板中使用。

<script setup>
import { defineEmits } from 'vue';

这里引入了 defineEmits 函数,用于定义组件内的事件发送机制。

3. 定义 emit

const emit = defineEmits(['message-to-parent']);
  • defineEmits 函数用来定义当前组件可以发出的自定义事件。这里定义了一个名为 message-to-parent 的事件,表示子组件可以通过这个事件向父组件发送消息。
  • emit 是一个方法,通过它我们可以触发事件,并可以携带参数发送给父组件。

4. 定义 sendMessageToParent 方法

const sendMessageToParent = () => {emit('message-to-parent', 'Hello from Child!');
};
  • 这个方法在用户点击按钮时触发,内部调用 emit 方法,触发 message-to-parent 事件。
  • 'message-to-parent' 是事件名称,'Hello from Child!' 是发送的消息内容。

因此,当按钮被点击时,子组件会向父组件发送一个事件,携带的消息内容是 'Hello from Child!'

总结

  • 这段代码展示了 Vue 3 通过 emit 向父组件发送消息的机制。
  • defineEmits 用来声明子组件可以触发的自定义事件。
  • sendMessageToParent 方法用于在点击按钮时,触发自定义事件并将消息发送给父组件。

父组件接收到 message-to-parent 事件后,可以通过绑定事件来处理这个消息,例如显示、记录或做其他逻辑处理。


```vue
<template><ChildComponent @message-to-parent="receiveMessageFromChild" />{{ messageFromChild }}
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './HelloWorld.vue';const messageFromChild = ref('');const receiveMessageFromChild = (message) => {messageFromChild.value = message;
};
</script>

相关文章:

前端组件化开发

假设这个页面是vue开发的&#xff0c;如果一整个页面都是编写在一个vue文件里面&#xff0c;后期不好维护&#xff0c;会特别的庞大&#xff0c;那么如何这个时候需要进行组件化开发。组件化开发后必然会带来一个问题需要进行组件之间的通信。组要是父子组件之间通信&#xff0…...

异步操作实现线程池

文章目录 futureasyncpromisepackage task C11线程池实现 future 在C11标准库中&#xff0c;提供了一个future的模板类&#xff0c;它表示的是一个异步操作的结果&#xff0c;当在多线程编程中使用异步任务的时候&#xff0c;使用这个类可以帮助在需要的时候获取到对应的数据处…...

长期提供APX515/B原装二手APX525/B音频分析仪

Audio Precision APx515 是一款针对生产测试而优化的高性能音频分析仪。它因其速度、性能、自动化和易用性而成为一流的仪器。它具有卓越的性能&#xff0c;具有 –106 dB 的典型 THDN、1M 点 FFT 和 192k 数字 I/O&#xff0c;以及所有 APx 系列音频分析仪的一键式自动化和易用…...

【数据库差异研究】update与delete使用表别名的研究

目录 ⚛️总结 ☪️1 Update ♋1.1 测试用例UPDATE users as a SET a.age 111 WHERE a.name Alice; ♏1.2 测试用例UPDATE users as a SET a.age 111 WHERE name Alice; ♐1.3 测试用例UPDATE users as a SET age 111 WHERE a.name Alice; ♑1.4 测试用例UPDATE us…...

idea远程连接docker

idea远程连接docker docker、ubuntu、linux、远程连接、IntelliJ idea注意&#xff01;本文中开启docker远程连接的方法只能在确定环境安全的内网中使用&#xff0c;不可在公网服务器设置&#xff0c;有极大安全风险&#xff01; 注意&#xff01;本文中开启docker远程连接的…...

Docker 安装 ClickHouse 教程

Docker 安装 ClickHouse 教程 创建目录 首先&#xff0c;创建必要的目录用于存放 ClickHouse 的配置、数据和日志文件。 mkdir -p /home/clickhouse/conf mkdir -p /home/clickhouse/data mkdir -p /home/clickhouse/log chmod -R 777 /home/clickhouse/conf chmod -R 777 /…...

过渡到内存安全语言:挑战和注意事项

开放源代码安全基金会 ( OpenSSF )总经理 Omkhar Arasaratnam 讨论了内存安全编程语言的演变及其为应对 C 和 C 等语言的局限性而出现的现象。 内存安全问题已存在五十多年&#xff0c;它要求程序员从内存管理任务中抽离出来。 Java、Rust、Python 和 JavaScript 等现代语言通…...

在Pycharm中安装Cv2

安装OpenCV&#xff1a; 在Terminal中&#xff0c;输入以下pip命令来安装OpenCV&#xff1a; pip install opencv-python pip install opencv-contrib-python 如果下载速度较慢&#xff0c;可以考虑使用国内的pip镜像源&#xff0c;如清华大学源&#xff1a; pip install openc…...

减少重复的请求之promise缓存池(构造器版) —— 缓存promise,多次promise等待并返回第一个promise的结果

减少重复的请求之promise缓存池 —— 缓存promise&#xff0c;多次promise等待并返回第一个promise的结果 背景简介 当一个业务组件初始化调用了接口&#xff0c;统一个页面多吃使用同一个组件&#xff0c;将会请求大量重复的接口 如果将promise当作一个普通的对象&#xff0…...

cdq+bitset处理高维偏序

高维偏序 CDQ分治 假设处理的区间为 [ l , r ] [l,r] [l,r] &#xff0c;CDQ分治的过程&#xff1a; 如果 l ≥ r l\geq r l≥r &#xff0c;返回。设区间中点为 m i d mid mid &#xff0c;递归处理 [ l , m i d ] [l,mid] [l,mid] 和 [ m i d 1 , r ] [mid1,r] [mid…...

敏捷开发和传统开发,你更适合哪种?

时间&#xff1a;2024年 10月 03日 作者&#xff1a;小蒋聊技术 邮箱&#xff1a;wei_wei10163.com 微信&#xff1a;wei_wei10 音频&#xff1a;喜马拉雅 大家好&#xff0c;欢迎来到“小蒋聊技术”&#xff0c;我是小蒋&#xff01;今天我们来聊聊两个开发模式的“对决”…...

python之with

with上下文管理是什么呢&#xff1f; 一般都是使用系统提供的一些with语句&#xff0c;列如我要去读取一些数据进行分析&#xff0c;就可以使用with open去读取某些数据&#xff0c;或者我要把一些图片给他保存到某些地方&#xff0c;可以用with给他写入。 上下午管理器with是…...

vue3 升级实战笔记

最近要将公司项目的移动端进行 vue3 的升级工作&#xff0c;就顺便记录下升级过程。 项目迁移的思路 我的想法是最小改动原则。 从 vue2.x 升级到 vue3&#xff0c;且使用 vue3 的 选项式 API。构建工具要从 vue-cli&#xff08;webpack&#xff09;升级到 vite。路由需要升级到…...

利用函数模块化代码实操 ← Python

【知识点】 ● 模块化可以使代码易于维护和调试&#xff0c;并且提高代码的重用性。 ● 函数可以用来减少冗余的代码并提高代码的可重用性。函数也可以用来模块化代码并提高程序的质量。 ● 在 Python 中&#xff0c;可以将函数的定义放在一个被称为模块的文件中,这种文件的后缀…...

Java高效编程(12):重写toString方法

解锁Python编程的无限可能&#xff1a;《奇妙的Python》带你漫游代码世界 尽管 Object 类提供了 toString 方法的默认实现&#xff0c;但它返回的字符串通常不是类的使用者想要看到的。默认返回的字符串格式是类名加上“”符号和哈希码的十六进制表示&#xff0c;例如 PhoneNu…...

谷歌给到的185个使用生成式AI的案例

很多公司从利用AI回答问题&#xff0c;进而使用AI进行预测&#xff0c;向使用生成式AI Agent转变。AI Agent的独特之处在于它们可以采取行动以实现特定目标&#xff0c;比如引导购物者找到合适的鞋子&#xff0c;帮助员工寻找合适的健康福利&#xff0c;或在护理人员交接班期间…...

程序员如何通过专业与软技能提升核心竞争力

一、引言  随着AIGC的兴起&#xff0c;AI辅助编程工具如chatgpt、midjourney、claude等接二连三地涌现&#xff0c;编程领域的变革正逐步深化。面对这一变革&#xff0c;程序员们对于未来工作的前景有着种种不同的担忧和期待。他们担心AI可能取代部分编程工作&#xff0c;同时…...

基于YOLOv8的智能植物监测机器人

摘要:针对传统的植物病害检测方法依赖专家的经验,耗时耗力,并且准确性受限于个人的水平等问题。文中提出无线通信模块采用HTTP协议来传输数据图片,采用SoC核心处理器实现了便携化,采用对射式红外避障传感器实现自动避障功能。以YOLOv8算法为控制核心,并添加注意力机制以提…...

2024年OpenAI DevDay发布实时 API、提示缓存等新功能

就在几天前&#xff0c;一些重要人物如前 CTO Mira Murati 离开了 OpenAI。因此&#xff0c;看到 Sam Altman 在 DevDay 上登台&#xff0c;讨论开发者的新产品&#xff0c;感觉有点奇怪。 随着公司内部的这些变化&#xff0c;你不禁会想&#xff1a;我们还应该信任他吗&#…...

Raspberry Pi3B+之安装bookworm+Rpanion系统

Raspberry Pi3B之安装bookwormRpanion系统 1. 源由2. 系统安装3. 系统安装3.1 烧录系统3.2 设备接线3.3 配置无线3.4 更新系统3.5 安装git3.6 克隆Rpanion3.7 安装Rpanion 4. 系统管理5. 附录问题1&#xff1a;error: externally-managed-environment问题2&#xff1a;bookworm…...

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

练习(含atoi的模拟实现,自定义类型等练习)

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

(二)原型模式

原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...