接收消息方(父组件)
<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"}
