vue3子组件用$emit发送事件给父组件，以及用emits判断参数合法性

vue3子组件调用父组件方法，除了this.$parent之外，还有$emit，这个和Vue2一样，但是，vue3多了个emits对调用之前进行参数判断，用法如下：

接收消息方（父组件）

<template>
    <v-login @submit='doLogin' />
</template>

<script>
import Login from './Login'
export default {
    components:{
        'v-login' : Login
    },
    methods:{
        doLogin(data){
            console.log(data)
        }
    }
}
</script>

消息发送方（子组件）

<template>
    账号：<input type="text" v-model="username" /><br>
    密码：<input type="password" v-model="password" /><br>
    <button @click="doLogin">登录</button>
</template>

<script>
export default {
    // emits参数验证
    emits:{
        submit: ({username,password}) => {
            if(username.length != '' && password.length != ''){
                return true
            }else{
                return false
            }
        }
    },
    data(){
        return {
            username: '',
            password: '',
        }
    },
    methods:{
        doLogin(){
            this.$emit('submit', {
                username: this.username,
                password: this.password
            })
        }
    }
}
</script>

此时，如果emits验证不通过，父组件仍然会执行，但是会打印warning：

[Vue warn]: Invalid event arguments: event validation failed for event "submit".
{username: "", password: ""}

如果验证通过，则不会提示warning：

{username: "1", password: "1"}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！