官方推荐用对象的方式声明props
props：{
基本的类型检查（'null'和'undefinde'会通过如何类型检验）
propA：Number，
多个可能的类型
propB：[String，Number]，
必填的字符串
propC:{
type:String,
required:true
},
带有默认值的对象
propE:{
type:Object,
default:function(){
return{message:'hello'}
}
},
自定义验证函数
propF：{
validator:function(value){
这个值必须匹配下列字符串中的一个
return ['success','warning','danger'].indexOf(value)
}
}
}
Stuprops.vue
<template>
<div class="props-container">
<h1>我叫{
{ name }}</h1>
<button @click="name='lucy'">在子组件中修改name值</button>
<h2>我今年:{
{age}}</h2>
<h3>我是{
{gender}}</h3>
<h4>我喜欢的食物是:</h4>
<ul>
<li v-for="(item,index) in foods" :key="index">{
{item}}</li>
<!-- <li>西兰花</li>
<li>花菜</li>
<li>西红柿</li> -->
</ul>
</div>
</template>
<script>
export default {
name:'PropsCom',
// props:["name","age","gender","foods"]
props:{
props:{
// 要求父组件传name数据
// 并且name数据的类型是字符串
name:String,
// age这个数据既允许字符串，也允许数组
// age:[String,Number],
// sex:{
// type:String,
// 必填项
// required:true,
// },
foods:{
type:Array,
// required:true,
// 默认值
default:function(){
return['哈密瓜','西瓜']
},
validator:function(value){
// vaule参数就是传递过来的数据
// 如果return ture代表校验通过
// 如果return false代表校验失败（报错）
return value.length > 0
}
}
}
}
}
</script>
<style >
.props-container {
border: 1px solid orange;
width: 300px;
background-color: yellowgreen;
padding: 10px;
}
h1,
h2,
h3,
h4 {
margin: 0;
}
</style>App.vue
