vue3中的emits的简单记录

emits

注意：是vue3中有的

之前的写法

子组件向父组件传递数据，或者子组件点击的时候，触发父组件的函数，使用方式

子组件的onClicks的事件中，使用this.$emit指定父组件要声明的事件

<button @click='btnClick'/>
...
methods:{
	btnClick(){
		this.$emit('xxx', {})
	}
}

在父组件中，声明要触发的函数，执行methods中的函数

<child @xxx='update'/>
.....
methos:{
	update(){
		...
	}
}

使用emits

官方文档
可以理解为，在子组件中，将要发送的函数在emits中集合声明了一下，在指定的时候，指定父组件要声明触发哪一个

官方文档有两种写法，一种数组形式，一种对象形式。

对象形式可以自定义对函数的参数进行校验

数组形式：

emits:['click', 'submit', 'xxx']

对象形式：

export default {
  emits: {
    // 没有验证函数
    click: null,

    // 具有验证函数
    submit: (payload) => {
      if (payload.email && payload.password) {
        return true
      } else {
        console.warn(`Invalid submit event payload!`)
        return false
      }
    }
  }
}

使用时的改变

之前是在@click指定的事件中通过this.$emit方式指定触发，现在可以直接在@click中指定触发，比如

<button @click='$emit(xxx)'/>

但是父组件的写法没有变化