前言

Vue封裝了自定義組件之后，如果子組件想要向父組件傳遞數(shù)據(jù)該怎么辦？

Vue.js 中的 emit 方法就是主要用于組件間的通信，特別是父組件與子組件之間的通信機制。它是 Vue 組件內(nèi)部觸發(fā)自定義事件并向父級組件傳遞數(shù)據(jù)的一種方式。

一、Vue 2 中的emti

在 Vue 組件中，當(dāng)你想要向父組件傳遞信息或通知父組件某個狀態(tài)發(fā)生了改變時，可以使用 $emit。通常情況下，子組件無法直接修改父組件的數(shù)據(jù)，而是通過定義并觸發(fā)一個自定義事件，由父組件監(jiān)聽并在回調(diào)函數(shù)中作出響應(yīng)。

但是要注意，Vue2和Vue3的用法略有不同。
Vue 2 示例：

<!-- 父組件（parent-component.vue） -->
<template>
  <div>
    <child-component @child-event="handleChildEvent" />
  </div>
</template>

<script>
import ChildComponent from './child-component.vue';

export default {
  components: { ChildComponent },
  methods: {
    handleChildEvent(data) {
      console.log('接收到的數(shù)據(jù):', data);
    }
  }
}
</script>
<!-- 子組件（child-component.vue） -->
<template>
  <div>
    <button @click="sendData">發(fā)送數(shù)據(jù)</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('child-event', '這是發(fā)送的數(shù)據(jù)');
    }
  }
}
</script>

在這個例子中，子組件 child-component.vue 使用 $emit 方法觸發(fā)了一個名為 child-event 的自定義事件，并傳入了一個參數(shù) data。父組件 parent-component.vue 通過監(jiān)聽 child-event 事件并定義一個處理函數(shù) handleChildEvent 來接收數(shù)據(jù)。當(dāng)子組件中的按鈕被點擊時，會觸發(fā) child-event 事件，父組件會接收到數(shù)據(jù)并在控制臺中打印出來。

二、Vue 3的emit

Vue 3 示例：

<!-- 父組件（parent-component.vue） -->
<template>
  <div>
    <child-component ref="childRef" />
  </div>
</template>

<script>
import ChildComponent from './child-component.vue';

export default {
  components: { ChildComponent },
  setup() {
    const childRef = ref(null);

    function handleChildEvent(data) {
      console.log('接收到的數(shù)據(jù):', data);
    }

    onMounted(() => {
      childRef.value.$on('child-event', handleChildEvent);
    });

    onUnmounted(() => {
      childRef.value.$off('child-event', handleChildEvent);
    });

    return { childRef };
  }
}
</script>

<!-- 子組件（child-component.vue） -->
<template>
  <div>
    <button @click="sendData">發(fā)送數(shù)據(jù)</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('child-event', '這是發(fā)送的數(shù)據(jù)');
    }
  }
}
</script>

在這個例子中，父組件 parent-component.vue 使用 ref 屬性創(chuàng)建了一個引用，并將其分配給子組件。在 setup 函數(shù)中，定義了一個處理函數(shù) handleChildEvent 用于處理自定義事件。在 onMounted 鉤子中，使用子組件引用的 off 方法取消對 child-event 事件的監(jiān)聽。當(dāng)子組件中的按鈕被點擊時，會觸發(fā) child-event 事件，父組件會接收到數(shù)據(jù)并在控制臺中打印出來。

總結(jié)

做一個積極向上的人，給自己和他人帶來陽光。