快捷導(dǎo)航

vue3中defineEmits的使用舉例詳解

更新時(shí)間：2023年08月14日 10:42:55 作者：coderXiao~

這篇文章主要給大家介紹了關(guān)于vue3中defineEmits使用的相關(guān)資料,在Vue3中可以使用defineEmits函數(shù)來(lái)定義組件的自定義事件,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

vue3 defineEmits的使用

以下代碼和內(nèi)容的使用都是在vue3的setup中，未使用TS。

1、計(jì)數(shù)器案例

父組件：

<template>
     <h2>當(dāng)前計(jì)數(shù)為： {{counter}}</h2>
     <HelloWorld @add1="add1" @decre1="decre1"></HelloWorld>
</template>
<script setup>
  import { ref } from 'vue'
  import HelloWorld from './HelloWorld.vue'
  // 1、定義的屬性
  const counter = ref(0)
  // 2、定義的方法
   const add1 = (payload) => {
     counter.value = payload
  }
  const decre1 = (payload) => {
     counter.value = payload
  }
</script>

子組件：

<template>
    <div>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button>
        <div>
             <input type="text" v-model.number="num">
        </div>
    </div>
</template>
<script setup>
    import { ref, defineEmits } from 'vue'
    // 1、定義的屬性
    const num = ref(0)
    // 2、定義發(fā)射給父組件的方法
    const emits = defineEmits(['add1', 'decre1'])
    // 3、定義新增和遞減計(jì)數(shù)方法
    const increment = () => {
        num.value++
        emits('add1', num.value)
    }
    const decrement = () => {
        num.value--
        emits('decre1', num.value)
    }
</script>

頁(yè)面渲染效果

2、案例說(shuō)明

1、在父組件中定義一個(gè)變量2、在子組件中定義+1和-1方法，以及一個(gè)變量3、通過(guò)子組件事件修改變量值，同時(shí)將值傳遞給父組件，對(duì)父組件的變量進(jìn)行賦值

3、defineEmits API 使用說(shuō)明

1、在子組件中調(diào)用defineEmits并定義要發(fā)射給父組件的方法

const emits = defineEmits(['add1', 'decre1'])

2、使用defineEmits會(huì)返回一個(gè)方法，使用一個(gè)變量emits(變量名隨意)去接收

3、在子組件要觸發(fā)的方法中，調(diào)用emits并傳入發(fā)射給父組件的方法以及參數(shù)

 emits('add1', num.value)

補(bǔ)充知識(shí)：Vue 2中

在Vue 2中，我們可以使用$emit方法來(lái)觸發(fā)自定義事件，并在父組件中通過(guò)v-on或@來(lái)監(jiān)聽(tīng)這些事件。以下是使用Vue 2創(chuàng)建自定義事件的示例：

首先，在子組件中使用$emit觸發(fā)自定義事件：

Vue.component('my-component', {
  methods: {
    handleClick() {
      this.$emit('my-event', 'event payload');
    }
  }
});

然后，在父組件中使用v-on或@來(lái)監(jiān)聽(tīng)自定義事件：

<my-component v-on:my-event="handleEvent"></my-component>
<!-- 或者使用 @ -->
<my-component @my-event="handleEvent"></my-component>

最后，在父組件的方法中處理自定義事件：

methods: {
  handleEvent(payload) {
    // 處理事件邏輯
    console.log('Received event:', payload);
  }
}

在這個(gè)示例中，子組件通過(guò)$emit方法觸發(fā)了一個(gè)名為my-event的自定義事件，并傳遞了一個(gè)payload作為參數(shù)。父組件通過(guò)v-on或@監(jiān)聽(tīng)這個(gè)自定義事件，并在對(duì)應(yīng)的方法中處理事件邏輯。

需要注意的是，在Vue 2中，自定義事件的傳遞是單向的，只能從子組件向父組件傳遞數(shù)據(jù)。如果需要在父組件中向子組件傳遞數(shù)據(jù)，可以使用props來(lái)實(shí)現(xiàn)。

使用場(chǎng)景：

父子組件通信：自定義事件是Vue 2中實(shí)現(xiàn)父子組件通信的一種方式。父組件可以監(jiān)聽(tīng)子組件觸發(fā)的自定義事件，從而獲取子組件傳遞的數(shù)據(jù)或執(zhí)行相應(yīng)的邏輯。
組件解耦：通過(guò)使用自定義事件，可以將組件解耦，使得組件之間的通信更加靈活和可維護(hù)。組件可以通過(guò)觸發(fā)自定義事件來(lái)通知其他組件發(fā)生了某些特定的動(dòng)作或狀態(tài)變化。

優(yōu)點(diǎn)：

靈活性：自定義事件提供了一種靈活的方式來(lái)實(shí)現(xiàn)組件之間的通信，可以根據(jù)具體的需求定義和觸發(fā)不同的事件。
組件解耦：通過(guò)使用自定義事件，可以將組件解耦，使得組件之間的通信更加靈活和可維護(hù)。

缺點(diǎn)：

單向傳遞：Vue 2中的自定義事件是單向傳遞的，只能從子組件向父組件傳遞數(shù)據(jù)。如果需要在父組件向子組件傳遞數(shù)據(jù)，需要使用props來(lái)實(shí)現(xiàn)。
需要手動(dòng)管理事件：在使用自定義事件時(shí)，需要手動(dòng)定義和管理事件的名稱和參數(shù)，相對(duì)于其他通信方式，需要更多的配置和代碼。

總體來(lái)說(shuō)，Vue 2中的自定義事件適用于父子組件之間的通信和組件解耦的場(chǎng)景。它提供了一種靈活的方式來(lái)實(shí)現(xiàn)組件之間的通信，但需要手動(dòng)管理事件，并且只能實(shí)現(xiàn)單向傳遞。在一些復(fù)雜的場(chǎng)景中，可能需要考慮使用Vuex或其他狀態(tài)管理庫(kù)來(lái)管理組件之間的共享狀態(tài)。