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>

 

posted @ 2020-04-08 08:42  JinweiChang  阅读(408)  评论(0编辑  收藏  举报