$emit用法詳解

一、$emit基本介紹

$emit是Vue.js的一個重要方法，用於父組件向子組件傳遞數據。

Vue.js是一個基於組件的框架，組件之間有很多通訊的需求，一個通訊的需求就是從父組件向子組件傳遞數據，所以Vue.js提供了$emit方法來實現這個需求。

二、$emit的使用方法

在父組件中使用$emit方法向子組件傳遞數據，需要經過以下步驟：

1、在父組件中定義一個方法，這個方法用於處理子組件傳遞過來的數據。

2、在父組件的template模板中調用子組件，並使用v-on指令來監聽子組件向父組件傳遞數據的事件。

3、在父組件的方法中使用$emit方法，將數據傳遞給子組件。

下面是一個具體的示例，實現在父組件中向子組件傳遞數據：

// 父組件
<template>
  <div>
    <ChildComponent v-on:childmethod="handleChildData"></ChildComponent>
  </div>
</template>
<script>
export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildData(data) {
      console.log(data);
    },
    sendDataToChild() {
      this.$emit("parentmethod", "data from parent");
    }
  }
}
</script>

// 子組件
<template>
  <div>This is ChildComponent</div>
</template>
<script>
export default {
  methods: {
    sendChildData() {
      this.$emit("childmethod", "data from child");
    }
  }
}
</script>

在上面的示例中，子組件中定義sendChildData()方法，用於將數據通過$emit方法向父組件傳遞；在父組件的template中使用v-on指令監聽子組件的childmethod事件，並在methods中定義handleChildData()方法，在該方法中處理子組件傳遞過來的數據；在父組件的方法中使用$emit方法，將數據傳遞給子組件。

三、$emit實現父子組件雙向綁定

Vue.js中的單向數據流是其核心特性之一，它保證了組件之間數據的單向流動。但是，在某些情況下，我們需要在父組件中修改子組件的數據，這時就需要使用$emit實現雙向綁定。

$emit實現雙向綁定，需要使用v-model指令。首先，在父組件中使用v-model指令綁定子組件的數據，在子組件中使用$emit方法更新父組件中的數據。

下面是一個具體的示例，實現父子組件雙向綁定：

// 父組件
<template>
  <div>
    <ChildComponent v-model="value"></ChildComponent>
  </div>
</template>
<script>
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      value: ""
    }
  },
}
</script>

// 子組件
<template>
  <div>
    <input type="text" v-model="inputValue" @input="updateValue">
  </div>
</template>
<script>
export default {
  props: ['value'],
  data() {
    return {
      inputValue: this.value
    }
  },
  methods: {
    updateValue(event) {
      this.inputValue = event.target.value;
      this.$emit("input", event.target.value);
    }
  }
}
</script>

在上面的示例中，父組件中使用v-model指令綁定子組件的數據，實現雙向綁定；在子組件中，使用$emit方法更新父組件中的數據。當子組件中的輸入框發生變化時，調用updateValue()方法，通過$emit方法將新的數據傳遞給父組件。

四、$emit實現非父子組件之間的通訊

$emit方法不僅可以用於父組件向子組件傳遞數據，還可以用於非父子組件之間的通訊。在非父子組件之間進行通訊，必須藉助於Vue.js中的全局事件匯流排——EventBus。

EventBus是一個Vue實例，我們可以在外部使用它來監聽和觸發全局事件。在Vue中，如果兩個組件之間不存在父子關係，它們之間的數據通訊就必須要藉助於EventBus實現。

下面是一個具體的示例，實現非父子組件之間的通訊：

// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

// ComponentA
<template>
  <div>
    <button @click="sendMessage">發送消息</button>
  </div>
</template>
<script>
import { EventBus } from "./EventBus.js";
export default {
  methods: {
    sendMessage() {
      EventBus.$emit("message", "Hello, ComponentB");
    }
  }
}
</script>

// ComponentB
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
import { EventBus } from "./EventBus.js";
export default {
  data() {
    return {
      message: ""
    }
  },
  mounted() {
    EventBus.$on("message", message => {
      this.message = message;
    });
  },
}
</script>

在上面的示例中，EventBus.js定義了EventBus實例，用於非父子組件之間的通訊；ComponentA中定義了sendMessage()方法，用於向EventBus實例中發送一個名為message的事件；ComponentB中監聽EventBus實例中名為message的事件，當監聽到該事件時，更新message的值，實現從ComponentA向ComponentB的通訊。

五、$emit的注意事項

$emit作為Vue.js中的一個重要方法，使用時有一些需要注意的地方：

1、使用v-model指令綁定父子組件的數據時，需要在子組件中使用$emit方法更新父組件中的數據。

2、$emit方法可以用於父子組件之間的通訊，也可以用於非父子組件之間的通訊，非父子組件之間的通訊需要藉助於Vue.js中的全局事件匯流排——EventBus。

3、事件名稱必須為小寫字母或者短橫線（kebab-case）。這是因為在HTML中，事件名不區分大小寫，但在JavaScript中卻區分大小寫，為了避免出現不必要的問題，建議使用小寫字母或者短橫線。

總結

通過對$emit方法的詳細闡述，我們了解到了它在Vue.js中的重要作用。$emit方法可以用於父子組件之間、非父子組件之間的通訊，可以實現父子組件的雙向綁定。但是，在使用$emit方法時，需要注意事件名稱的大小寫、使用v-model指令時，需要在子組件中使用$emit方法更新父組件中的數據。