VueJS 中创建事件和挂载事件有什么区别？

在VueJS中，事件是非常重要的一部分，可以方便地向组件发送消息或响应用户的交互。VueJS中有两种方式来创建事件：创建事件和挂载事件。虽然两者都能用于创建事件，但是它们有一些重要的区别。

创建事件

创建事件是指在VueJS组件内部定义一个自定义事件。在VueJS中，我们可以使用 this.$emit 方法来触发自定义事件。下面是一个简单的示例，展示了如何在组件内部创建并触发一个自定义事件：

<!-- template -->
<button @click="add(1)">Add One</button>

// component
export default {
  methods: {
    add(count) {
      this.$emit('add-count', count);
    }
  }
}

在上面的示例中，我们在 add 方法内部使用 this.$emit 触发了一个 add-count 事件。这个事件可以被其他组件监听并响应。

挂载事件

挂载事件是指在HTML元素上直接声明一个事件处理器。在VueJS中，我们可以使用 v-on 指令来在HTML元素上挂载事件。下面是一个示例，展示了如何在HTML元素上挂载一个点击事件处理器：

<!-- template -->
<button v-on:click="onButtonClick">Click Me!</button>

// component
export default {
  methods: {
    onButtonClick() {
      alert('Button Clicked!');
    }
  }
}

在上面的示例中，我们使用 v-on:click 指令在HTML元素上挂载了一个点击事件处理器。当用户点击按钮时， onButtonClick 方法将被调用。

区别

虽然两者都可以用于创建事件，但是它们有一些重要的区别：

• 创建事件只能在组件内部使用，它不会影响HTML元素。而挂载事件只能在HTML元素上使用，它不能影响组件内部。
• 创建事件使用 $emit 方法来触发自定义事件，而挂载事件使用事件处理器来响应事件。
• 创建事件可以向上级组件发送消息，也可以通过 $parent 访问直接的父组件，而挂载事件只能向下级组件发送消息。

因此，我们应该根据实际需求来选择是创建事件还是挂载事件。在需要向上级组件发送消息时，应该使用创建事件；在需要响应用户交互时，应该使用挂载事件。