Vue.js 組件
組件(Component)是 Vue.js 最強大的功能之一。
組件可以擴展 HTML 元素,封裝可重用的代碼。
組件系統讓我們可以用獨立可復用的小組件來構建大型應用,幾乎任意類型的應用的界面都可以抽象為一個組件樹:
注冊一個全局組件語法格式如下:
Vue.component(tagName, options)
tagName 為組件名,options 為配置選項。注冊後,我們可以使用以下方式來調用組件:
<tagName></tagName>
全局組件
所有實例都能用全局組件。
全局組件實例
注冊一個簡單的全局組件 runoob,併使用它:
<div id="app">
<runoob></runoob>
</div>
<script>
// 注冊
Vue.component('runoob', {
template: '<h1>自定義組件!</h1>'
})
// 創建根實例
new Vue({
el: '#app'
})
</script>
嘗試一下 »
局部組件
我們也可以在實例選項中注冊局部組件,這樣組件只能在這個實例中使用:
局部組件實例
注冊一個簡單的局部組件 runoob,併使用它:
<div id="app">
<runoob></runoob>
</div>
<script>
var Child = {
template: '<h1>自定義組件!</h1>'
}
// 創建根實例
new Vue({
el: '#app',
components: {
// <runoob> 將只在父模板可用
'runoob': 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: 'Runoob' },
{ text: 'Google' },
{ text: 'Taobao' }
]
}
})
</script>
嘗試一下 »
注意: prop 是單向綁定的:當父組件的屬性變化時,將傳導給子組件,但是不會反過來。
Prop 驗證
組件可以為 props 指定驗證要求。
prop 是一個對象而不是字符串數組時,它包含驗證要求:
Vue.component('example', {
props: {
// 基礎類型檢測 (`null` 意思是任何類型都可以)
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 value > 10
}
}
}
})
type 可以是下面原生構造器:
- String
- Number
- Boolean
- Function
- Object
- Array
type 也可以是一個自定義構造器,使用 instanceof 檢測。
自定義事件
父組件是使用 props 傳遞數據給子組件,但如果子組件要把數據傳遞回去,就需要使用自定義事件!
我們可以使用 v-on 綁定自定義事件, 每個 Vue 實例都實現了事件接口(Events interface),即:
- 使用
$on(eventName)
監聽事件
- 使用
$emit(eventName)
觸發事件
另外,父組件可以在使用子組件的地方直接用 v-on 來監聽子組件觸發的事件。
以下實例中子組件已經和它外部完全解耦了。它所做的只是觸發一個父組件關心的內部事件。
實例
<div id="app">
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
</div>
<script>
Vue.component('button-counter', {
template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
incrementHandler: function () {
this.counter += 1
this.$emit('increment')
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
})
</script>
嘗試一下 »
如果你想在某個組件的根元素上監聽一個原生事件。可以使用 .native 修飾 v-on 。例如:
<my-component v-on:click.native="doTheThing"></my-component>