vue自定义事件 验证传递参数是否合法

在vue开发项目过程中，我们偶尔会用到自定义事件，以及利用自定义事件进行组件间的传值，今天小编就给大家讲解一下组件之间自定义事件的使用。

父组件代码

<template>
  <HelloWorld msg="Welcome to Your Vue.js App" @submit="doLogin"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  methods: {
    doLogin(e){
      console.log('--',e)
    }
  },
}
</script>

子组件代码以及验证参数是否合法

注意：这里虽然做了传递的参数是否合法的验证，但是一样会触发自定义事件

<template>
  <div class="hello">
    <h2>登陆组件</h2>
    <input type="text" v-model="username">
    <input type="text" v-model="userpassword">
    <button @click="doLogin">执行登陆</button>
  </div>
</template>

<script>
export default {
 // 验证自定义事件的传值参数是否合法,
  emits: {
    submit:({
      username,
      password
      })=>{
        if(username != "" && password!= ""){
          return true
        }else{
        console.log('用户名密码不能为空')
        return false
        }
       
    }
  },
  name: 'HelloWorld',
  props: {
  },
  data(){
    return {
      username:'',
      userpassword:""
    }
  },
  methods: {
  // 第一个参数是自定义事件，第二个是传入的参数
    doLogin(){
      this.$emit('submit',"wuhan")  // wuhan
    }
  },
}
</script>
<style scoped>

</style>

上面就是关于自定义事件的使用场景以及自定义事件传值取值的方法。