Vue.js 組件

組件（Component）是 Vue.js 最強大的功能之一。

組件可以擴展 HTML 元素，封裝可重用的代碼。

組件系統讓我們可以用獨立可復用的小組件來構建大型應用，幾乎任意類型的應用的界面都可以抽象為一個組件樹：

註冊一個全局組件語法格式如下：

Vue.component(tagName, options)

tagName 為組件名，options 為配置選項。註冊後，我們可以使用以下方式來調用組件：

<tagName></tagName>

全局組件

所有實例都能用全局組件。

全局組件實例

註冊一個簡單的全局組件 runoob，並使用它：

<divid="app"><runoob></runoob></div><script>// 註冊
Vue.component("runoob", {
template: "<h1>自定義組件!</h1>"
})
// 創建根實例
new Vue({
el: "#app"
})</script>

局部組件

我們也可以在實例選項中註冊局部組件，這樣組件只能在這個實例中使用：

局部組件實例

註冊一個簡單的局部組件 runoob，並使用它：

<divid="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 實例

<divid="app"><childmessage="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 實例

<divid="app"><div><inputv-model="parentMsg"><br><childv-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 實例

<divid="app"><ol><todo-itemv-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", {

type 可以是下面原生構造器：

• String

• Number

• Boolean

• Function

• Object

• Array

type 也可以是一個自定義構造器，使用 instanceof 檢測。

自定義事件

父組件是使用 props 傳遞數據給子組件，但如果子組件要把數據傳遞迴去，就需要使用自定義事件！

我們可以使用 v-on 綁定自定義事件, 每個 Vue 實例都實現了事件介面(Events interface)，即：

• 使用 $on(eventName) 監聽事件

• 使用 $emit(eventName) 觸發事件

另外，父組件可以在使用子組件的地方直接用 v-on 來監聽子組件觸發的事件。

以下實例中子組件已經和它外部完全解耦了。它所做的只是觸發一個父組件關心的內部事件。

實例

<divid="app"><divid="counter-event-example"><p>{{ total }}</p><button-counterv-on:increment="incrementTotal"></button-counter><button-counterv-on:increment="incrementTotal"></button-counter></div></div><script>Vue.component("button-counter", {
template: "<buttonv-on:click="increment">{{ counter }}</button>",
data: function () {
return {
counter: 0
}
},
methods: {
increment: 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>

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！