组件传递props校验

注意：prop是只读的！不可以修改父组件的数据。

可以检验传过来的内容是否类型没问题。

App.vue

<template><div><!-- <parentDemo/> --><componentA/></div></template>
<script>
import ComponentA from './components/componentA.vue';// import parentDemo from './components/parentDemo.vue';
export default{components:{// parentDemoComponentA}
}
</script>
<style></style>

A.vue

<template><div><h3>componentA</h3><componentB :title="titles" />//不传name</div>
</template>
<script>
import ComponentB from './componentB.vue';export default{data(){return{titles:'sss',names:['小明','画画']}},components:{ComponentB}
}
</script>

B.vue

<template><div><h3>componentB</h3><p>{{ title }}</p><!-- A组件没有传age的值 --><p>{{ age }}</p><p v-for="(iteam,index) of names " :key='index'>{{ iteam }}</p></div></template>
<script>
export default{data(){return{}},props:{title:{// 接受多种类型type:[Number,String,Array,Object],// 必选项,若不传则报警告。required:true},age:{// 没传age的值type:Number,// 没传显示默认值为0，传了就显示传的值default:0},// 数字和字符串可以直接default,但是如果是数组和对象，必须通过函数返回函数默认值names:{type:Array,// 数组默认返回函数default(){return["空"]}}}
}
</script>