vue 组件的参数校验props

有一点需要注意：子组件直接修改父组件的值会报一个警告⚠，正确使用✔是先在data 中备份  num : this.msg !!!

还有个需要注意的是： 不支持小驼峰写法 如：changNum,statusFlag等

props特性：在dom 不显示属性msg（自定义）

非props特性：在dom中会显示属性

父组件home

<template>
    <div>
        <h1>home组件</h1>
        <!-- 没有加v-bind 传的值永远是字符串 -->
        <!-- <child msg='123'></child> -->
        <child1 :msg= "'1234'"></child1>
    </div>
  
</template>

<script>
import child1 from './Child1'
export default {
    components: {
        child1
    }
}
</script>

子组件 child1 

<template>
    <div>
        <h1>child1组件</h1>
        <p>{{msg}}</p>
    </div>
  
</template>

<script>
export default {
    //props: ['msg'],
     props:{
        //传入的类型必须是数字或者字符串类型
        // msg:[Number,String]
         msg: {
            type: String,
            // 必填项设置true 或false
            // required: false,
            default: 'default value',
            //返回空数组
            default() {
                 return []
            }
            // 自定义校验规则
            validator(value){
                return (value.length > 3)
            }
         }
     },
}
</script>