如何在 Vue TypeScript 项目使用 emits 事件

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的强大功能，我们可以确保我们的组件之间的通信精确无误且类型安全。使用接口和精确的负载类型定义，我们能够在开发过程中捕获潜在的错误，同时提升代码补全功能，提高应用程序的整体可维护性！

结束

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。

粉丝福利

分享一个漂亮的 BootStrap 5 后台管理源码