一 props的值有两种方式:
1.字符串数组,数组中的字符串就是传递时的名称。
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
2.对象,对象可以设置传递时数据的类型,也可以设置默认值等,即Vue官方文档中的props数据验证。
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}
二 静态props和动态props
1.静态props 父组件向子组件传递数据,子组件props中定义的属性名在父组件标签中直接作为属性使用,父组件中该属性的属性值为静态的值(官方文档这么说),也就是属性值作为字符串传入到子组件中.
子组件中:
props:{
path:String,
activeColor:{
type:String,
default:'red'
}
}
父组件中:
<parentag path="/home" activeColor="deepPink"></parentag>
这样父组件标签的path和activeColor中的值就传到了子组件中。
2.动态props
通过V-bind动态地将父组件的数据传给子组件,属性值中的值作为变量传到子组件中。
<!-- 动态赋予一个变量的值 -->
<blog-post :title="post.title"></blog-post>