vue-传值校验

Posted 2021-03-02 jinweichang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue-传值校验相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        
        <meta charset="utf-8">
        <title>vue1</title>
        <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
      
        <link rel="stylesheet" type="text/css" href="vue.css">
    
    </head>
    <body>
        
        
        <div id="app">

            <comp :msg="msg"></comp>
        </div>    
        
        
        <script>
            var comp={
                
                //父组件传给子组件可以进行值校验，
                props:{
                    msg:{
                        type:String,
                        //required:true,
                        default:"hello,sa"
                        // validator:function(){

                        // }

                    }
                },
                template:`<div>{{msg}}</div>`,

                //父组件传来的值要先接收，再修改
                data(){
                    return {
                    info:""
                    }
                },
                created:function(){
                    this.info=this.msg+"ttt"
                    console.log(this.info)

                }
            }
            var app=new Vue({
                el:"#app",
                data:{
                    msg:"aaa"             
                },
                components:{
                    comp
                }
 
                
            })        
        </script>
    </body>
</html>

以上是关于vue-传值校验的主要内容，如果未能解决你的问题，请参考以下文章

30 Vue子组件调用父组件方法传值和校验