props之数据验证

验证的类型可以是：
String，Number，Boolean，Object，Array，Function

props:{
  props1:Number,  //必须是数值类型
  props2:[String,Number],  // 数字类型 || 字符串
  props3:{
     type:Number,  // 数值型   true为必传
     required: true
},
props4:{
    type:Boolean,  // 布尔值  default默认为true
    default: true
},
props5:{
type: Array,  // 如果是数组 || 对象 默认值必须是一个函数返回
default:function{
  return [];
}
}
}

好了，我们开始进入主题吧!

父组件如下：

<template>
<div>
<input type="text"  v-model="msg">  <!-- v-model双向绑定 -->
<son :datas=msg></son> <!-- 子组件通过datas接收msg数据 -->
</div>
</template>
<script>
import  son from  '引入子组件';
export default {
component:{ son }, // 注册组件
data(){
  return{
  msg:'我是父组件数据'
}
}
}
</script>

子组件如下：

<template>
<div>
{{datas}}   <!--这里就可以传过来的显示数据了-->
</div>
</template>
<script>
data(){
  props:{
  datas:{       // 这里的datas用于接收
  type:String,   // 我们接收验证的是字符串 也可以验证别的类型
}
}
}
</script>