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