首页 > 建站教程 > 前端框架 >  vue3子组件用$emit发送事件给父组件,以及用emits判断参数合法性正文

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"}