Vue.js 元件
元件(Component)是 Vue.js 最強大的功能之一。
元件可以擴充套件 HTML 元素,封裝可重用的程式碼。
元件系統讓我們可以用獨立可複用的小元件來構建大型應用,幾乎任意型別的應用的介面都可以抽象為一個元件樹:
註冊一個全域性元件語法格式如下:
Vue.component(tagName, options)
tagName 為元件名,options 為配置選項。註冊後,我們可以使用以下方式來呼叫元件:
<tagName></tagName>
全域性元件
所有例項都能用全域性元件。
全域性元件例項
註冊一個簡單的全域性元件 itread01,並使用它:
<div id="app">
<itread01></itread01>
</div>
<script>
// 註冊
Vue.component('itread01', {
template: '<h1>自定義元件!</h1>'
})
// 建立根例項
new Vue({
el: '#app'
})
</script>
嘗試一下 ?
區域性元件
我們也可以在例項選項中註冊區域性元件,這樣元件只能在這個例項中使用:
區域性元件例項
註冊一個簡單的區域性元件 itread01,並使用它:
<div id="app">
<itread01></itread01>
</div>
<script>
var Child = {
template: '<h1>自定義元件!</h1>'
}
// 建立根例項
new Vue({
el: '#app',
components: {
// <itread01> 將只在父模板可用
'itread01': Child
}
})
</script>
嘗試一下 ?
Prop
prop 是子元件用來接受父元件傳遞過來的資料的一個自定義屬性。
父元件的資料需要通過 props 把資料傳給子元件,子元件需要顯式地用 props 選項宣告 "prop":
Prop 例項
<div id="app">
<child message="hello!"></child>
</div>
<script>
// 註冊
Vue.component('child', {
// 宣告 props
props: ['message'],
// 同樣也可以在 vm 例項中像 "this.message" 這樣使用
template: '<span>{{ message }}</span>'
})
// 建立根例項
new Vue({
el: '#app'
})
</script>
嘗試一下 ?
動態 Prop
類似於用 v-bind 繫結 HTML 特性到一個表示式,也可以用 v-bind 動態繫結 props 的值到父元件的資料中。每當父元件的資料變化時,該變化也會傳導給子元件:
Prop 例項
<div id="app">
<div>
<input v-model="parentMsg">
<br>
<child v-bind:message="parentMsg"></child>
</div>
</div>
<script>
// 註冊
Vue.component('child', {
// 宣告 props
props: ['message'],
// 同樣也可以在 vm 例項中像 "this.message" 這樣使用
template: '<span>{{ message }}</span>'
})
// 建立根例項
new Vue({
el: '#app',
data: {
parentMsg: '父元件內容'
}
})
</script>
嘗試一下 ?
以下例項中使用 v-bind 指令將 todo 傳到每一個重複的元件中:
Prop 例項
<div id="app">
<ol>
<todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
</ol>
</div>
<script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
new Vue({
el: '#app',
data: {
sites: [
{ text: 'itread01' },
{ text: 'Google' },
{ text: 'Taobao' }
]
}
})
</script>
嘗試一下 ?
注意: prop 是單向繫結的:當父元件的屬性變化時,將傳導給子元件,但是不會反過來。
Prop 驗證
元件可以為 props 指定驗證要求。
為了定製 prop 的驗證方式,你可以為 props 中的值提供一個帶有驗證需求的物件,而不是一個字串陣列。例如:
Vue.component('my-component', { props: { // 基礎的型別檢查 (`null` 和 `undefined` 會通過任何型別驗證) propA: Number, // 多個可能的型別 propB: [String, Number], // 必填的字串 propC: { type: String, required: true }, // 帶有預設值的數字 propD: { type: Number, default: 100 }, // 帶有預設值的物件 propE: { type: Object, // 物件或陣列預設值必須從一個工廠函式獲取 default: function () { return { message: 'hello' } } }, // 自定義驗證函式 propF: { validator: function (value) { // 這個值必須匹配下列字串中的一個 return ['success', 'warning', 'danger'].indexOf(value) !== -1 } } } })
當 prop 驗證失敗的時候,(開發環境構建版本的) Vue 將會產生一個控制檯的警告。
type 可以是下面原生構造器:
String
Number
Boolean
Array
Object
Date
Function
Symbol
type 也可以是一個自定義構造器,使用 instanceof 檢測。