vue-传值校验

你离开我真会死。 提交于 2020-04-08 09:49:29

 

 

 

<!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>

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!