码迷,mamicode.com
首页 > 其他好文 > 详细

vue-传值校验

时间:2020-04-08 09:33:33      阅读:76      评论:0      收藏:0      [点我收藏+]

标签:one   style   efault   pre   boot   function   char   ops   info   

 

 

 

<!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-传值校验

标签:one   style   efault   pre   boot   function   char   ops   info   

原文地址:https://www.cnblogs.com/JinweiChang/p/12657768.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!