Vue3验证抛出事件

最新推荐文章于 2024-03-01 16:46:49 发布

琹箐

最新推荐文章于 2024-03-01 16:46:49 发布

阅读量772

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_45327886/article/details/119795036

版权

前端专栏收录该内容

77 篇文章 3 订阅

订阅专栏

一.问题

vue官方文档中只有主要代码介绍，没有完整例子，自己操作时无从下手

二、解决方法

1.书写思路

1）在emits中以对象的形式添加验证函数。

emits: {
  
   // 验证submit 事件
    submit: ({ email, password }) => {
      if (email && password) {
        return true
      } else {
        console.warn('Invalid submit event payload!')
        return false
      }
    }
  },

2）确定哪个控件的哪个事件触发事件（此处在点击按钮“提交”时触发事件）

 template:
    `
    <label for="email">email</label>
    <input id="email" v-model="email"/>
    <br/>
    <label for="password">password</label>
    <input id="password" v-model="password"/>
    <br/>
    <button @click="this.$emit('submit',{email,password})">提交</button>
    `,

3）参数email和password从哪里来

此时，email和password是不存在的,所以要在组件内部的data选项中定义并且实时获取input中的数据(检验才有意义,静态数据检验意义不大）——input中使用 v-model

 data(){
       return{
           email:"",
           password:"",
       }
   },

注：官方文档中把验证函数sumbit的调用，写在了methods选项中的 submitForm函数中。效果和这个是一样的——只是为了减少字符串模板中的逻辑代码而已。

2.完整代码

1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义事件</title>
    <script src="./vue@next.js"></script>

</head>
<body>
    <div id="app">
        <custom-form  ></custom-form>
    </div>
    <script src="day5-自定义事件.js"></script>
</body>
</html>

2.js代码

const customForm={
   data(){
       return{
           email:"",
           password:"",
           phone:""
       }
   },
    emits:{
        click:null,
        submit:({email,password})=>{
            if(email&&password){
                console.log(email,password,true)
                return true;
            }
            else{
                console.log(email,password,false)
                console.warn('Invalid submit event payload!')

                return false;
            }
        },

    },
  template:
    `
    <label for="email">email</label>
    <input id="email" v-model="email"/>
    <br/>
    <label for="password">password</label>
    <input id="password" v-model="password"/>
    <br/>
    <button @click="this.$emit('submit',{email,password})">提交</button>
    `,
   
}
const rootApp={
    components:{
        "custom-form":customForm
    },
  
}
const app=Vue.createApp(rootApp);
app.mount("#app");

或者

const customForm={
   data(){
       return{
           email:"",
           password:"",
           phone:""
       }
   },
    emits:{
        click:null,
        submit:({email,password})=>{
            if(email&&password){
                console.log(email,password,true)
                return true;
            }
            else{
                console.log(email,password,false)
                console.warn('Invalid submit event payload!')

                return false;
            }
        },

    },
  template:
    `
    <label for="email">email</label>
    <input id="email" v-model="email"/>
    <br/>
    <label for="password">password</label>
    <input id="password" v-model="password"/>
    <br/>
    <button @click="submitForm(email,password)">提交</button>
    `,
    methods:{
        submitForm(email,password){
            this.$emit('submit',{email,password})

        }
    }
}
const rootApp={
    components:{
        "custom-form":customForm
    },
  
}
const app=Vue.createApp(rootApp);
app.mount("#app");