vue组件参数校验与非props特性

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
           <child></child><!--用props来传递content,content="hello world"默认值不显示-->
        </div>
    </body>
    <script>
    Vue.component('child',{
        template:'<div>{{content}}</div>',
        props:{
            //content:[String,Number]//用对象的方式来传递字符串,可以用Number
            content:{
                type:String,
                //required:false,
                //default:'default value'//默认值
                validator:function(value){
                    return(value.length>5)
                }
            }
        }
    })
    var vm=new Vue({
        el:'#app',
    })
    </script>
</html>

标签: 无

发表评论:

whatsapp营销