Vue3小知识:一篇关于emits的使用指南
ztj100 2025-01-05 01:02 13 浏览 0 评论
转载说明:原创不易,未经授权,谢绝任何形式的转载
Vue是构建出色的Web应用程序的最灵活、灵活和强大的JavaScript框架之一。Vue中最重要的概念和关键特性之一是能够促进应用程序组件之间的通信。让我们深入探讨一下Vue中的“emits”概念,并了解它们如何以流畅和无缝的方式实现父子组件之间的通信。
Vue中的emits是什么
Vue应用程序架构中的核心概念之一是组件之间的父子关系。父组件经常需要与其子组件进行交互,反之亦然!我们利用这个概念来创建复杂且交互性强的用户界面。虽然props使得数据从父组件流向子组件,但是“emits”使得数据从子组件流向父组件。
基本上,“emits”是Vue中的一个概念,允许子组件与其父组件进行通信。在Vue中使用emits时,您可以向父组件发出带有数据(可选)的自定义事件。父组件可以监听事件并相应地处理自己的“响应”。这是一种强大的机制,可以促进子组件和父组件之间的无缝通信!
为什么 emits 有用
Emits 提供了一种结构化和解耦的方式,使组件能够与其父组件进行交互。这样可以创建更易于维护和扩展的应用程序。通过利用 emits,我们可以创建可重用的子组件,而不会将它们与其父组件紧密耦合在一起,从而可以在各种上下文中使用。
Emits 在实现子组件与父组件之间的高度解耦方面起着至关重要的作用。当子组件向父组件发射事件时,它们不会直接操作父组件的状态或调用父组件的方法。相反,发射器提供了一个抽象层,允许父组件决定如何处理这些事件。我认为,这种关注点的分离有助于实现更易于维护和可扩展的架构!
组件通信
Vue遵循组件化架构,将用户界面划分为更小、自包含的单元,也称为组件。组件可以嵌套和组合,以构建复杂的应用程序。然而,随着组件的嵌套和应用程序的扩大,组件之间的通信变得必不可少!组件通信允许不同的组件交换数据、触发操作,并在整个应用程序中保持应用程序状态的一致性。
让我们来看一个简单的例子,了解一下如何在Vue中让组件进行通信。
子组件
<template>
<button @click="sendMessageToParent">Send Message to Parent</button>
</template>
<script setup>
import { defineEmits } from 'vue';
const emit = defineEmits(['messageToParent']);
const sendMessageToParent = () => {
const message = 'Hello from child!';
emit('messageToParent', message);
}
</script>
父组件
<template>
<div>
<child-component @message-to-parent="handleMessageFromChild" />
<p>Message from child: {{ messageFromChild }}</p>
</div>
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';
const messageFromChild = ref('');
const handleMessageFromChild = (message) => {
messageFromChild.value = message;
}
</script>
在这个例子中,我们有一个 ChildComponent ,当按钮被点击时,它会发出一个名为 messageToParent 的自定义事件,并携带一个消息负载。 ParentComponent 监听发出的事件,并使用接收到的消息更新其状态( messageFromChild )。
当在 ChildComponent 中点击“发送消息给父级”按钮时,将执行 sendMessageToParent 函数,发出带有“Hello from child!”消息作为其有效负载的自定义事件。
ParentComponent 通过模板中的 @messageToParent 属性接收发出的事件,并使用 handleMessageFromChild 函数处理它。然后,消息有效载荷存储在 messageFromChild 引用中,该引用会自动更新模板以显示来自子组件的消息。
简单吧?这展示了你如何在Vue中使组件“相互通信”。你不仅仅局限于发送字符串作为载荷;你甚至可以发送复杂类型,如对象、数组等等。
如何在Typescript中正确地使用类型推断
使用emits的一个“缺点”是,当你发出一个自定义事件时,你不一定知道子组件会发出什么。这种不确定性可能会导致数据类型和运行时错误的潜在问题。幸运的是,Vue 3的Composition API与TypeScript结合提供了一个非常强大的解决方案来解决这个问题。通过正确地为emits添加类型,你可以确保类型安全性,提高代码清晰度,并使你的Vue应用程序更易于维护。
让我们探索如何使用Vue 3的Composition API和script setup正确地使用TypeScript来输入emits。
子组件(使用TypeScript):
<template>
<button @click="sendDataToParent">Send Data to Parent</button>
</template>
<script setup lang="ts">
import { defineEmits } from 'vue';
// Define the interface for the emitted object
// (Ideally a shared interface for both components)
// This could event get exported, fot the parent component can import it
interface ItemData {
id: number;
name: string;
quantity: number;
}
const emit = defineEmits<{
// Define the emitted event and its payload type
(event: 'dataToParent', payload: ItemData[]): void;
}>();
function sendDataToParent() {
const payload: ItemData[] = [
{ id: 1, name: 'Item 1', quantity: 3 },
{ id: 2, name: 'Item 2', quantity: 5 },
{ id: 3, name: 'Item 3', quantity: 2 },
];
emit('dataToParent', payload);
}
</script>
父组件:(使用TypeScript)
<template>
<div>
<test-child @data-to-parent="handleDataFromChild" />
<div v-if="itemsFromChild.length">
<p v-for="item in itemsFromChild" :key="item.id">Item: {{ item.name }} | Quantity: {{ item.quantity }}</p>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import TestChild from '@/TestChild.vue';
// Define the interface for the emitted object
// (Ideally a shared interface for both components)
interface ItemData {
id: number;
name: string;
quantity: number;
}
const itemsFromChild = ref<ItemData[]>([]);
const handleDataFromChild = (payload: ItemData[]) => {
itemsFromChild.value = payload;
};
</script>
通过利用TypeScript的强大功能,我们可以确保我们的组件之间的通信精确无误且类型安全。使用接口和精确的负载类型定义,我们能够在开发过程中捕获潜在的错误,同时提升代码补全功能,提高应用程序的整体可维护性!
由于文章内容篇幅有限,今天的内容就分享到这里,文章结尾,我想提醒您,文章的创作不易,如果您喜欢我的分享,请别忘了点赞和转发,让更多有需要的人看到。同时,如果您想获取更多前端技术的知识,欢迎关注我,您的支持将是我分享最大的动力。我会持续输出更多内容,敬请期待。
相关推荐
- Vue 技术栈(全家桶)(vue technology)
-
Vue技术栈(全家桶)尚硅谷前端研究院第1章:Vue核心Vue简介官网英文官网:https://vuejs.org/中文官网:https://cn.vuejs.org/...
- vue 基础- nextTick 的使用场景(vue的nexttick这个方法有什么用)
-
前言《vue基础》系列是再次回炉vue记的笔记,除了官网那部分知识点外,还会加入自己的一些理解。(里面会有部分和官网相同的文案,有经验的同学择感兴趣的阅读)在开发时,是不是遇到过这样的场景,响应...
- vue3 组件初始化流程(vue组件初始化顺序)
-
学习完成响应式系统后,咋们来看看vue3组件的初始化流程既然是看vue组件的初始化流程,咋们先来创建基本的代码,跑跑流程(在app.vue中写入以下内容,来跑流程)...
- vue3优雅的设置element-plus的table自动滚动到底部
-
场景我是需要在table最后添加一行数据,然后把滚动条滚动到最后。查网上的解决方案都是读取html结构,暴力的去获取,虽能解决问题,但是不喜欢这种打补丁的解决方案,我想着官方应该有相关的定义,于是就去...
- Vue3为什么推荐使用ref而不是reactive
-
为什么推荐使用ref而不是reactivereactive本身具有很大局限性导致使用过程需要额外注意,如果忽视这些问题将对开发造成不小的麻烦;ref更像是vue2时代optionapi的data的替...
- 9、echarts 在 vue 中怎么引用?(必会)
-
首先我们初始化一个vue项目,执行vueinitwebpackechart,接着我们进入初始化的项目下。安装echarts,npminstallecharts-S//或...
- 无所不能,将 Vue 渲染到嵌入式液晶屏
-
该文章转载自公众号@前端时刻,https://mp.weixin.qq.com/s/WDHW36zhfNFVFVv4jO2vrA前言...
- vue-element-admin 增删改查(五)(vue-element-admin怎么用)
-
此篇幅比较长,涉及到的小知识点也比较多,一定要耐心看完,记住学东西没有耐心可不行!!!一、添加和修改注:添加和编辑用到了同一个组件,也就是此篇文章你能学会如何封装组件及引用组件;第二能学会async和...
- 最全的 Vue 面试题+详解答案(vue面试题知识点大全)
-
前言本文整理了...
- 基于 vue3.0 桌面端朋友圈/登录验证+60s倒计时
-
今天给大家分享的是Vue3聊天实例中的朋友圈的实现及登录验证和倒计时操作。先上效果图这个是最新开发的vue3.x网页端聊天项目中的朋友圈模块。用到了ElementPlus...
- 不来看看这些 VUE 的生命周期钩子函数?| 原力计划
-
作者|huangfuyk责编|王晓曼出品|CSDN博客VUE的生命周期钩子函数:就是指在一个组件从创建到销毁的过程自动执行的函数,包含组件的变化。可以分为:创建、挂载、更新、销毁四个模块...
- Vue3.5正式上线,父传子props用法更丝滑简洁
-
前言Vue3.5在2024-09-03正式上线,目前在Vue官网显最新版本已经是Vue3.5,其中主要包含了几个小改动,我留意到日常最常用的改动就是props了,肯定是用Vue3的人必用的,所以针对性...
- Vue 3 生命周期完整指南(vue生命周期及使用)
-
Vue2和Vue3中的生命周期钩子的工作方式非常相似,我们仍然可以访问相同的钩子,也希望将它们能用于相同的场景。...
- 救命!这 10 个 Vue3 技巧藏太深了!性能翻倍 + 摸鱼神器全揭秘
-
前端打工人集合!是不是经常遇到这些崩溃瞬间:Vue3项目越写越卡,组件通信像走迷宫,复杂逻辑写得脑壳疼?别慌!作为在一线摸爬滚打多年的老前端,今天直接甩出10个超实用的Vue3实战技巧,手把...
- 怎么在 vue 中使用 form 清除校验状态?
-
在Vue中使用表单验证时,经常需要清除表单的校验状态。下面我将介绍一些方法来清除表单的校验状态。1.使用this.$refs...
你 发表评论:
欢迎- 一周热门
- 最近发表
-
- Vue 技术栈(全家桶)(vue technology)
- vue 基础- nextTick 的使用场景(vue的nexttick这个方法有什么用)
- vue3 组件初始化流程(vue组件初始化顺序)
- vue3优雅的设置element-plus的table自动滚动到底部
- Vue3为什么推荐使用ref而不是reactive
- 9、echarts 在 vue 中怎么引用?(必会)
- 无所不能,将 Vue 渲染到嵌入式液晶屏
- vue-element-admin 增删改查(五)(vue-element-admin怎么用)
- 最全的 Vue 面试题+详解答案(vue面试题知识点大全)
- 基于 vue3.0 桌面端朋友圈/登录验证+60s倒计时
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- node卸载 (33)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- exceptionininitializererror (33)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)