组件参数校验和非props特性

组件参数校验

如果父组件定义content=""属性，引号表示的是一个字符串，只有：content=""的形式，引号里才表示一个js表达式。

参数校验：

属性名：{

  type:[数据类型1，数据类型2]或单独的数据类型

  required:Boolean,//是否必传

 default:'default value',//默认值

 validator: function(value){//自定义校验

     return (条件)

    }

}

<body>
 <div id="root">
   <!-- <child content="hello world"></child> -->
    <child content="hello world"></child>
 </div>
 <script>
  Vue.component('child',{
    props:{
      // content:[Number,String],content可以传数组或对象
      content:{
        type:String,
        required:false,
        default:'default value',
        validator:function(value){
          return(value.length>5)
        }
      }
    },
    template:'<div>{{content}}</div>'
  })
  var vm=new Vue({
    el:'#root'
  })
 </script>
</body>

props特性

父传子接（有用props接受），属性不显示在dom标签里

非props特性

父传子不接（没有用props接受），子组件中无法使用该值，属性显示在dom标签里。

posted @ 2019-12-19 16:35  嘘，在学习呢  阅读(246)  评论(0)  编辑  收藏  举报