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

Vue是構(gòu)建出色的Web應(yīng)用程序的最靈活、靈活和強大的JavaScript框架之一。Vue中最重要的概念和關(guān)鍵特性之一是能夠促進(jìn)應(yīng)用程序組件之間的通信。讓我們深入探討一下Vue中的“emits”概念，并了解它們?nèi)绾我粤鲿澈蜔o縫的方式實現(xiàn)父子組件之間的通信。

Vue中的emits是什么

Vue應(yīng)用程序架構(gòu)中的核心概念之一是組件之間的父子關(guān)系。父組件經(jīng)常需要與其子組件進(jìn)行交互，反之亦然！我們利用這個概念來創(chuàng)建復(fù)雜且交互性強的用戶界面。雖然props使得數(shù)據(jù)從父組件流向子組件，但是“emits”使得數(shù)據(jù)從子組件流向父組件。

基本上，“emits”是Vue中的一個概念，允許子組件與其父組件進(jìn)行通信。在Vue中使用emits時，您可以向父組件發(fā)出帶有數(shù)據(jù)（可選）的自定義事件。父組件可以監(jiān)聽事件并相應(yīng)地處理自己的“響應(yīng)”。這是一種強大的機制，可以促進(jìn)子組件和父組件之間的無縫通信！

為什么 emits 有用

Emits 提供了一種結(jié)構(gòu)化和解耦的方式，使組件能夠與其父組件進(jìn)行交互。這樣可以創(chuàng)建更易于維護(hù)和擴展的應(yīng)用程序。通過利用 emits，我們可以創(chuàng)建可重用的子組件，而不會將它們與其父組件緊密耦合在一起，從而可以在各種上下文中使用。

Emits 在實現(xiàn)子組件與父組件之間的高度解耦方面起著至關(guān)重要的作用。當(dāng)子組件向父組件發(fā)射事件時，它們不會直接操作父組件的狀態(tài)或調(diào)用父組件的方法。相反，發(fā)射器提供了一個抽象層，允許父組件決定如何處理這些事件。我認(rèn)為，這種關(guān)注點的分離有助于實現(xiàn)更易于維護(hù)和可擴展的架構(gòu)！

組件通信

Vue遵循組件化架構(gòu)，將用戶界面劃分為更小、自包含的單元，也稱為組件。組件可以嵌套和組合，以構(gòu)建復(fù)雜的應(yīng)用程序。然而，隨著組件的嵌套和應(yīng)用程序的擴大，組件之間的通信變得必不可少！組件通信允許不同的組件交換數(shù)據(jù)、觸發(fā)操作，并在整個應(yīng)用程序中保持應(yīng)用程序狀態(tài)的一致性。

讓我們來看一個簡單的例子，了解一下如何在Vue中讓組件進(jìn)行通信。

子組件

    <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  ，當(dāng)按鈕被點擊時，它會發(fā)出一個名為  messageToParent  的自定義事件，并攜帶一個消息負(fù)載。  ParentComponent  監(jiān)聽發(fā)出的事件，并使用接收到的消息更新其狀態(tài)（  messageFromChild  ）。

當(dāng)在  ChildComponent  中點擊“發(fā)送消息給父級”按鈕時，將執(zhí)行  sendMessageToParent  函數(shù)，發(fā)出帶有“Hello from child!”消息作為其有效負(fù)載的自定義事件。

ParentComponent  通過模板中的  @messageToParent  屬性接收發(fā)出的事件，并使用  handleMessageFromChild  函數(shù)處理它。然后，消息有效載荷存儲在  messageFromChild  引用中，該引用會自動更新模板以顯示來自子組件的消息。

簡單吧？這展示了你如何在Vue中使組件“相互通信”。你不僅僅局限于發(fā)送字符串作為載荷；你甚至可以發(fā)送復(fù)雜類型，如對象、數(shù)組等等。

如何在Typescript中正確地使用類型推斷

使用emits的一個“缺點”是，當(dāng)你發(fā)出一個自定義事件時，你不一定知道子組件會發(fā)出什么。這種不確定性可能會導(dǎo)致數(shù)據(jù)類型和運行時錯誤的潛在問題。幸運的是，Vue 3的Composition API與TypeScript結(jié)合提供了一個非常強大的解決方案來解決這個問題。通過正確地為emits添加類型，你可以確保類型安全性，提高代碼清晰度，并使你的Vue應(yīng)用程序更易于維護(hù)。

讓我們探索如何使用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的強大功能，我們可以確保我們的組件之間的通信精確無誤且類型安全。使用接口和精確的負(fù)載類型定義，我們能夠在開發(fā)過程中捕獲潛在的錯誤，同時提升代碼補全功能，提高應(yīng)用程序的整體可維護(hù)性！

結(jié)束

由于文章內(nèi)容篇幅有限，今天的內(nèi)容就分享到這里，文章結(jié)尾，我想提醒您，文章的創(chuàng)作不易，如果您喜歡我的分享，請別忘了點贊和轉(zhuǎn)發(fā)，讓更多有需要的人看到。同時，如果您想獲取更多前端技術(shù)的知識，歡迎關(guān)注我，您的支持將是我分享最大的動力。我會持續(xù)輸出更多內(nèi)容，敬請期待。

粉絲福利

分享一個漂亮的 BootStrap 5 后臺管理源碼