vue 组件事件

一、什么是组件事件

我们会发现有时候子组件需要与父组件进行交互，当子组件的事件被触发时，父组件可以相对应地做出处理。

二、触发事件

1、在组件的模板表达式中，可以直接使用 $emit 方法触发自定义事件 (例如：在 v-on 的处理函数中)：

<!-- MyComponent -->
<button @click="$emit('someEvent')">click me</button>

2、$emit() 方法在组件实例上也同样以 this.$emit() 的形式可用：

export default {
    
    
  methods: {
    
    
    submit() {
    
    
      this.$emit('someEvent')
    }
  }
}

三、监听事件

父组件可以通过 v-on (缩写为 @) 来监听事件：

<MyComponent @some-event="callback" />

注意： 这里我们触发了一个以 camelCase 形式命名的事件，但在父组件中可以使用 kebab-case 形式来监听。与 prop 大小写格式一样，在模板中我们也推荐使用 kebab-case 形式来编写监听器。

四、事件参数

在触发事件时可以附带一个特定的值。

例：

<!-- 子组件 -->
<button @click="$emit('increaseBy', 1)">
  Increase by 1
</button>

<!-- 父组件1 箭头函数 -->
<MyButton @increase-by="(n) => count += n" />

<!-- 父组件2 方法 -->
<MyButton @increase-by="increaseCount" />

解释： 所有传入 $emit() 的额外参数都会被直接传向监听器。