跟着官网学 Vue - 事件

1. 触发与监听事件： 在组件的模板表达式中，可以直接使用 $emit 方法触发自定义事件。

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

   或者在组件实例方法中使用：

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

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

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

   也可以使用 .once 修饰符来只监听一次事件：

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

2. 事件参数： 可以在触发事件时传递额外的参数，并在监听事件时接收这些参数。

   <!-- 在触发事件时传递额外的参数 -->
   <button @click="$emit('increaseBy', 1)">Increase by 1</button>
   
   <!-- 在父组件中监听事件并接收参数 -->
   <MyButton @increase-by="(n) => count += n" />
   

   或者通过组件方法处理事件：

   <MyButton @increase-by="increaseCount" />
   

   methods: {
     increaseCount(n) {
       this.count += n;
     }
   }
   

3. 声明触发的事件： 可以使用 emits 选项显式地声明组件要触发的事件。

   export default {
     emits: ['inFocus', 'submit']
   }
   

   emits 也支持对象语法，用于对触发事件的参数进行验证。

   export default {
     emits: {
       submit(payload) {
         // 通过返回值为 `true` 还是为 `false` 来判断验证是否通过
       }
     }
   }
   

4. 事件校验： 类似于对 props 进行类型校验，可以使用对象形式为事件添加校验。

   export default {
     emits: {
       click: null, // 没有校验
       submit: ({ email, password }) => {
         if (email && password) {
           return true;
         } else {
           console.warn('Invalid submit event payload!');
           return false;
         }
       }
     },
     methods: {
       submitForm(email, password) {
         this.$emit('submit', { email, password });
       }
     }
   }
   

以上是关于 Vue 组件中事件的一些重要概念和实践。下面是一个完整的代码案例，演示了上述的使用方法：

<!-- ParentComponent.vue -->

<template>
  <div>
    <MyComponent @some-event="handleSomeEvent" />
    <MyComponent @some-event.once="handleSomeEventOnce" />
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  methods: {
    handleSomeEvent() {
      // 处理触发的事件
      console.log('Some event triggered in ParentComponent');
    },
    handleSomeEventOnce() {
      // 处理触发的事件
      console.log('once event triggered in ParentComponent');
    }
  }
}
</script>

<!-- MyComponent.vue -->

<template>
  <button @click="triggerSomeEvent">Click me</button>
</template>

<script>
export default {
  methods: {
    triggerSomeEvent() {
      // 触发自定义事件
      this.$emit('some-event');
    }
  }
}
</script>

在这个例子中，ParentComponent 监听了 MyComponent 触发的自定义事件 some-event，并在触发时执行了相应的处理函数。