Vue 组件参数校验与非props属性

1.组件参数校验

父组件对子组件进行参数传递，子组件有权对传进来的内容进行约束

<div id="app">
        <child :content="hell"></child>   <!--父组件传递给子组件 content-->
</div>

 <script>
    Vue.component('child',{
        //【1】无约束
        props:['content'], 

        //【2】要求传递进来的content值必须是字符串，键是传递进来的属性名称，值时约束类型
        props:{
            content:String  
        },

        //【3】要求传递进来的content值是字符串或者数字
        props:{
            content:[Number,String] 
        },

        //【4】更复杂的约束
        props:{
            content:{
                type:String,   //类型约束
                required:true,  //必传
                default:'default Value', //若父组件没传值，子组件会取默认值
                validator:function(value){   //自定义校验器，长度要求大于5
                    return (value.length>5)
                }
            }
        },
        template:'<div>{{content}}</div>'
    })
    var vm=new Vue({
        el:"#app"
    })

 2.非props属性与props属性的理解

props特性：

    [1]要求父组件要传，子组件要接，然后在子组件中可以直接使用父组件传递过来的数据

    [2]props特性不会将传递给子组件的属性显示在DOM标签中

 

非pros特性：

    [1]父组件传，但是子组件不接，那么子组件就不能使用父组件传递过来的属性

    [2]非porps特性会将属性值显示在DOM标签中