$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方法更新父组件中的数据。