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

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

defineEmits()

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

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

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

字符串數(shù)組語法：

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

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

對象語法：

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

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

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

示例

子組件ChildComponent.vue：

<!-- ChildComponent.vue -->
<template>
  <h2>ChildComponent的標題</h2>
  <div>ChildComponent的內容</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')，點擊按鈕，調用emit('updateCustomValue', count.value);，字符串hello world 會被賦值給 customValue。

瀏覽器控制臺報錯：

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

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

emits組件選項

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

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

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

字符串數(shù)組語法：

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

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

對象語法：

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

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

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

最新評論