Vue之Props
1. Prop写法
在DOM模板中使用时&＃xff0c;要使用横线分隔&＃xff0c;如下的 post-title
Vue.component(&＃39;blog-post&＃39;, {// camelCase in Javascriptprops: [&＃39;postTitle&＃39;],template: &＃39;{{ postTitle }}
&＃39;
})
2. 规定Prop数据类型
props的两种写法&＃xff0c;后一种写法&＃xff0c;可以规定数据的类型&＃xff0c;不符合类型&＃xff0c;vue会抛出警告
// 写法一
props: [&＃39;title&＃39;, &＃39;likes&＃39;, &＃39;isPublished&＃39;, &＃39;commentIds&＃39;, &＃39;author&＃39;]// 写法二
props: {title: String,likes: Number,isPublished: Boolean,commentIds: Array,author: Object,callback: Function,contactsPromise: Promise // or any other constructor
}
3. 传递静态或动态Props
除了string&＃xff0c;还可传递任意类型的prop数据&＃xff1a;number、boolean、array、object
4. 单向数据流
父组件通过props向子组件传递数据&＃xff0c;影响子组件状态
5. 对Prop进行类型检查
示例&＃xff1a;
Vue.component(&＃39;my-component&＃39;, {props: {// Basic type check (&＃96;null&＃96; and &＃96;undefined&＃96; values will pass any type validation)propA: Number,// Multiple possible typespropB: [String, Number],// Required stringpropC: {type: String,required: true},// Number with a default valuepropD: {type: Number,default: 100},// Object with a default valuepropE: {type: Object,// Object or array defaults must be returned from// a factory functiondefault: function () {return { message: &＃39;hello&＃39; }}},// Custom validator functionpropF: {validator: function (value) {// The value must match one of these stringsreturn [&＃39;success&＃39;, &＃39;warning&＃39;, &＃39;danger&＃39;].indexOf(value) !&＃61;&＃61; -1}}}
})
6. 非Prop的Attribute
一个非 prop 的 attribute 是指传向一个组件&＃xff0c;但是该组件并没有相应 prop 定义的 attribute。 而这些 attribute 会被添加到这个组件的根元素上。
例如&＃xff1a;
// 在该组件的props中并未接受这个data-date-picker,然后这个 data-date-picker&＃61;"activated" attribute 就会自动添加到 的根元素上。
&＃xff08;完&＃xff09;
更多Vue文档解读&＃xff1a;《Vue Doc 笔记》
京公网安备 11010802041100号