defineEmits() 和 emits組件選項(xiàng)在功能上都是用于聲明組件可以向外觸發(fā)的事件。它們的核心目的都是讓組件明確地告知外界它能夠發(fā)出哪些自定義事件，以此來規(guī)范組件間的通信。

defineEmits()在 Vue 3 的組合式 API 中使用。
emits組件選項(xiàng) 在Vue 2 及 Vue 3 的選項(xiàng)式 API 中使用。

defineEmits()

defineEmits()用于聲明由組件觸發(fā)的自定義事件。

可以以兩種形式聲明觸發(fā)的事件：

• 使用字符串?dāng)?shù)組的簡易形式。
• 使用對(duì)象的完整形式。該對(duì)象的每個(gè)屬性鍵是事件的名稱，值是 null 或一個(gè)驗(yàn)證函數(shù)。
  • 驗(yàn)證函數(shù)應(yīng)返回布爾值，以表明事件參數(shù)是否通過了驗(yàn)證。

字符串?dāng)?shù)組語法：

<script setup>
const emit = defineEmits(['increment', 'decrement']);
</script>

defineEmits接收一個(gè)字符串?dāng)?shù)組['increment', 'decrement']，這意味著在該組件內(nèi)部可以通過emit('increment')和emit('decrement')來觸發(fā)increment和decrement這兩個(gè)事件。

對(duì)象語法：

<script setup>
const emit = defineEmits({
    updateCount: (newCount) => {
        return typeof newCount === 'number';
    }
});
</script>

defineEmits接收一個(gè)對(duì)象，對(duì)象的鍵updateCount是事件名稱，值是一個(gè)驗(yàn)證函數(shù)(newCount) => { return typeof newCount === 'number'; }。當(dāng)在組件內(nèi)部調(diào)用emit('updateCount', value)時(shí)，這個(gè)驗(yàn)證函數(shù)會(huì)檢查傳遞的value是否為數(shù)字類型，如果不是，Vue 會(huì)在開發(fā)環(huán)境下給出警告。

defineEmits函數(shù)的返回值是一個(gè)函數(shù)，通常命名為emit。emit可以在子組件中觸發(fā)自定義事件。當(dāng)子組件需要向父組件傳遞數(shù)據(jù)或通知父組件發(fā)生了某些事情時(shí)，可以使用emit函數(shù)觸發(fā)相應(yīng)的自定義事件。

示例

子組件ChildComponent.vue：

<!-- ChildComponent.vue -->
<template>
  <h2>ChildComponent的標(biāo)題</h2>
  <div>ChildComponent的內(nèi)容</div>
  <div>count: {{ count }}</div>
  <div>在ChildComponent中展示customValue的值：{{ attrs.customValue }}</div>
  <button @click="changeCount">修改count 并 賦值給 父組件的 customValue</button>
</template>
<script setup lang="ts">
import { ref, useAttrs } from 'vue';
let attrs = useAttrs();
let count = ref(1);
const emit = defineEmits({
  updateCustomValue: count => {
    return typeof count.value == 'number';
  }
});
const changeCount = () => {
  count.value++
  emit('updateCustomValue', count.value);
};
</script>

在父組件中使用ChildComponent.vue：

<template>
  <div class="home-wrap">
    <h1>父組件</h1>
    <ChildComponent
      class="child-div"
      :customValue="customValue"
      @updateCustomValue="updateCustomValue"
    />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
const customValue = ref(10);
const updateCustomValue = ($event: number) => {
  console.log($event);
  customValue.value = $event;
};
</script>

如果將子組件的count 屬性聲明為字符串count = ref('hello world')，點(diǎn)擊按鈕，調(diào)用emit('updateCustomValue', count.value);，字符串hello world 會(huì)被賦值給 customValue。

瀏覽器控制臺(tái)報(bào)錯(cuò)：

Invalid event arguments: event validation failed for event “updateCustomValue”.

無效的事件參數(shù):事件"updateCustomValue"驗(yàn)證失敗。

emits組件選項(xiàng)

emits用于聲明由組件觸發(fā)的自定義事件。

可以以兩種形式聲明觸發(fā)的事件：

• 使用字符串?dāng)?shù)組的簡易形式。
• 使用對(duì)象的完整形式。該對(duì)象的每個(gè)屬性鍵是事件的名稱，值是 null 或一個(gè)驗(yàn)證函數(shù)。
  • 驗(yàn)證函數(shù)會(huì)接收到傳遞給組件的 $emit 調(diào)用的額外參數(shù)。例如，如果 this.$emit('foo', 1) 被調(diào)用，foo 相應(yīng)的驗(yàn)證函數(shù)將接受參數(shù) 1。
  • 驗(yàn)證函數(shù)應(yīng)返回布爾值，以表明事件參數(shù)是否通過了驗(yàn)證。

字符串?dāng)?shù)組語法：

export default {
  emits: ['customEvent1', 'customEvent2']
};

emits是一個(gè)組件選項(xiàng)，它是一個(gè)字符串?dāng)?shù)組，其中customEvent1和customEvent2是這個(gè)組件可以觸發(fā)的兩個(gè)自定義事件。在組件的方法中，可以通過this.$emit('customEvent1', data)來觸發(fā)customEvent1事件，并傳遞相關(guān)數(shù)據(jù)data。

對(duì)象語法：

export default {
  emits: {
   customEvent: (payload) => {
     // 驗(yàn)證邏輯，例如檢查 payload 的類型或值
     return payload > 0;
   }
  }
};

emits是一個(gè)對(duì)象，customEvent是事件名稱，其對(duì)應(yīng)的值是一個(gè)驗(yàn)證函數(shù)。當(dāng)在組件內(nèi)部通過this.$emit('customEvent', value)觸發(fā)事件時(shí)，這個(gè)驗(yàn)證函數(shù)會(huì)檢查傳遞的value是否符合條件（這里是value > 0）。如果不符合，Vue 會(huì)在開發(fā)環(huán)境下發(fā)出警告。

到此這篇關(guān)于vue3 組合式API defineEmits() 與 emits 組件選項(xiàng)的文章就介紹到這了,更多相關(guān)vue3 API defineEmits() 與 emits 組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論