props验证

<my-component1 :msg="msg"></my-component1>

let myComponent1 = {
  props:{
    msg:{
      type:Number,//数据类型
      // default:1//默认值
      required:true,//必填,
      validator(val){//自定义校验
        return val % 2 === 0
      }
    }
  },
  template:"<div>组件{{msg+1}}</div>",
}

//根组件
new Vue({
  el: "#app",
  components:{
    myComponent1
  },
  data:{
    msg:2
  }
});

%accordion% props校验练习🚀 %accordion%

<div id="app">
    <my-component1 :msg="msg"></my-component1>
</div>

<script>
    //局部组件（区域注册）子组件
    let myComponent1 = {
        template: "<div>{{msg+1}}</div>",
        //校验他是什么数据类型
        props: {
            msg: {
                // type: Number, //校验类型
                type: String,
                default: 1,//默认值
                required: true,//必填
                validator(val) {
                    //自定校验
                    // return val>=2;
                    let reg = /hi/; //正侧表达式
                    return reg.test(val);
                }
            }
        }
    };

    //父组件
    new Vue({
        el: "#app",
        data: {
            // msg: 1,
            msg: "hi"
        },
        components: {
            myComponent1,
        },
    });
</script>