快捷導(dǎo)航

詳解Vue如何使用$emit進(jìn)行組件通信

更新時間：2023年12月30日 10:05:26 作者：liwp_Stephen

$emit是Vue實例的一個方法,它用于觸發(fā)自定義事件,本文主要為大家詳細(xì)介紹了Vue如何使用$emit進(jìn)行組件通信,感興趣的小伙伴可以跟隨小編咦學(xué)習(xí)一下

Vue.js是一個漸進(jìn)式JavaScript框架，它以其簡潔的數(shù)據(jù)綁定和組件系統(tǒng)而聞名。在構(gòu)建具有多個組件層次的Vue應(yīng)用時，組件間的通信成為一個關(guān)鍵的話題。Vue提供了一種名為$emit的方法，允許子組件向父組件發(fā)送消息。本文將詳細(xì)介紹如何在Vue中使用$emit方法，以及如何在父組件中監(jiān)聽這些事件。

什么是$emit

$emit是Vue實例的一個方法，它用于觸發(fā)自定義事件。這些事件可以被父組件監(jiān)聽到，從而實現(xiàn)子組件向父組件的通信。這種方法的好處在于，它可以讓數(shù)據(jù)的流動保持單向，有助于維護(hù)組件之間的清晰界限。

如何觸發(fā)事件

在子組件中，你可以通過調(diào)用this.$emit('event-name', payload)來觸發(fā)一個事件。'event-name'是你想要觸發(fā)的事件名稱，而payload是你想要隨事件發(fā)送的數(shù)據(jù)。下面是一個簡單的例子：

// ChildComponent.vue
<template>
  <button @click="sendToParent">Click Me!</button>
</template>

<script>
export default {
  methods: {
    sendToParent() {
      // Trigger an event named 'custom-event' with some data
      this.$emit('custom-event', { message: 'Hello from the child component!' });
    }
  }
}
</script>

在這個例子中，當(dāng)用戶點擊按鈕時，sendToParent方法會被調(diào)用，并觸發(fā)一個名為custom-event的事件，同時傳遞一個包含消息的對象作為載荷。

如何監(jiān)聽事件

在父組件中，我們可以使用v-on指令（或其縮寫@）來監(jiān)聽子組件觸發(fā)的事件。在父組件的模板中，你需要在子組件的標(biāo)簽上添加監(jiān)聽器。

// ParentComponent.vue
<template>
  <child-component @custom-event="handleCustomEvent"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(payload) {
      console.log('Event received!', payload);
      // Act on the payload data
    }
  }
}
</script>

在這個例子中，ParentComponent.vue監(jiān)聽ChildComponent發(fā)射的custom-event。一旦custom-event被觸發(fā)，handleCustomEvent方法就會被調(diào)用，同時接收到的載荷數(shù)據(jù)作為參數(shù)傳遞給這個方法。

Vue 3中的$emit

在Vue 3中，雖然$emit的使用方式類似，但是Vue 3引入了組合式API，這為組件結(jié)構(gòu)提供了不同的方式。以下是在Vue 3中使用$emit的一個例子：

// ParentComponent.vue
<template>
  <child-component @custom-event="handleCustomEvent"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(payload) {
      console.log('Event received!', payload);
      // Act on the payload data
    }
  }
}
</script>

父組件的監(jiān)聽方式與Vue 2中相同。