Vue3 emits选项将Emit派发事件可以对参数进行验证。

• Vue官方建议我们在组件中所有的emit事件都能在组件的emits选项中声明
• emits参数有俩种形式对象和数组，对象里面可以配置带校验emit事件，为null的时候代表不校验，校验的时候，会把emit事件的参数传到校验函数的参数里面
• 当校验函数不通过的时候，控制台会输出一个警告，但是emit事件会继续执行
• 比如你 emit 事件的名称正好和原生事件的名字重复了，那么这个事件会执行俩次，那么配置了   emits 这个选项的话，就可解决这个问题。
• Vue3 中使用emit发起事件时会要求当前组件记录emit事件（没有则控制台会抛出警告）。

一、数组用法

export default {
    emits:['changeOne', 'changeTwo'],
    setup() {...}
}

用法二、对象用法，当emits为对象时，可以验证事件中的参数是否有效

export default {
    emits:{
        click: null,
        'changeOne': payload => {
            if(...) {
                return true; // 验证通过
            }
            console.warn('验证失败！')
            return false; // 验证失败，控制台打印vue警告及“验证失败！”警告
        },
        'changeTwo': payload => {...}
    },
    setup() {...}
}
// 当验证函数中没有返回值return时，默认返回true

emits无论是数组或者对象用法最终都会将事件给传递出去，数组或对象的使用只是为了记录实例中的emit事件，或者是验证事件中的参数。 

子组件

<template>
  <div>
    我是子组件{{ msg }}
  </div>
  <button @click="handleClick(1)">我是按钮1</button>
  <button @click="handleClick(2)">我是按钮2</button>
</template>

<script>
import { ref } from 'vue'
export default {
  name: '',
  emits: {
    sonClick: (value) => {
      if (value === 1) {
        return true
      } else {
        return false
      }
    },
  },
  setup(props, { emit }) {
    const msg = ref('hello')
    const handleClick = (value) => {
      emit('sonClick', value)
    }
    return {
      msg,
      handleClick,
    }
  },
}
</script>

父组件

<template>
  <div>
    <h2>我是父组件！</h2>
    <Child @sonClick="sonClick" />
  </div>
</template>

<script>
import Child from "../components/Child.vue";
import { ref } from "vue";

export default {
  setup() {
    const sonClick = (value) => {
      console.log(value);
    };
    return { sonClick };
  },

  components: {
    Child,
  },
};
</script>

我们分别点一下按钮1和按钮2，可以看到当我们点了按钮2的时候，控制台会发出警告，但是程序会继续执行。