VeeのProps
2502 ワード
1.Prop書き方
DOMテンプレートで使用する場合、横線で区切るには、次の
2.Propデータ型の規定
3.静的または動的Propsの転送
stringに加えて、number、boolean、array、objectの任意のタイプのpropデータを渡すことができます.
4.一方向データストリーム
親コンポーネントは、
5.Propのタイプチェック
例:
6.非PropのAttribute
非propのattributeとは、コンポーネントに渡されることを意味するが、そのコンポーネントには対応するprop定義のattributeはない.これらのattributeは、このコンポーネントのルート要素に追加されます.
例:
(完)
より多くのVueドキュメントの解読:『Vue Docノート』
DOMテンプレートで使用する場合、横線で区切るには、次の
post-title
を使用します.Vue.component('blog-post', {
// camelCase in JavaScript
props: ['postTitle'],
template: '{{ postTitle }}
'
})
2.Propデータ型の規定
props
の2つの書き方、後の1つの書き方、データのタイプを規定することができて、タイプに合わないで、vueは警告を投げ出します//
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
//
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}
3.静的または動的Propsの転送
stringに加えて、number、boolean、array、objectの任意のタイプのpropデータを渡すことができます.
//
//
4.一方向データストリーム
親コンポーネントは、
props
を介してサブコンポーネントにデータを渡し、サブコンポーネントのステータスに影響を与えます.5.Propのタイプチェック
例:
Vue.component('my-component', {
props: {
// Basic type check (`null` and `undefined` values will pass any type validation)
propA: Number,
// Multiple possible types
propB: [String, Number],
// Required string
propC: {
type: String,
required: true
},
// Number with a default value
propD: {
type: Number,
default: 100
},
// Object with a default value
propE: {
type: Object,
// Object or array defaults must be returned from
// a factory function
default: function () {
return { message: 'hello' }
}
},
// Custom validator function
propF: {
validator: function (value) {
// The value must match one of these strings
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
6.非PropのAttribute
非propのattributeとは、コンポーネントに渡されることを意味するが、そのコンポーネントには対応するprop定義のattributeはない.これらのattributeは、このコンポーネントのルート要素に追加されます.
例:
// props data-date-picker, data-date-picker="activated" attribute 。
(完)
より多くのVueドキュメントの解読:『Vue Docノート』