Vue.js每天必學之組件與組件間的通信

什麼是組件？

組件（Component）是Vue.js 最強大的功能之一。組件可以擴展HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生HTML 元素的形式，以is 特性擴展。

使用組件

註冊

之前說過，我們可以用Vue.extend() 創建一個組件構造器：

 var MyComponent = Vue.extend({ // 選項...})

要把這個構造器用作組件，需要用`Vue.component(tag, constructor)` **註冊** ：

 // 全局註冊組件，tag 為my-componentVue.component('my-component', MyComponent)

<p>對於自定義標籤名字，Vue.js 不強制要求遵循W3C 規則（小寫，並且包含一個短槓），儘管遵循這個規則比較好。

組件在註冊之後，便可以在父實例的模塊中以自定義元素<my-component> 的形式使用。要確保在初始化根實例之前註冊了組件：

 <div id="example"> <my-component></my-component></div>// 定義var MyComponent = Vue.extend({ template: '<div>A custom component!</div>'})// 註冊Vue.component('my-component', MyComponent)// 創建根實例new Vue({ el: '#example'})

渲染為：

 <div id="example"> <div>A custom component!</div></div>

注意組件的模板替換了自定義元素，自定義元素的作用只是作為一個掛載點。可以用實例選項replace 決定是否替換。

局部註冊

不需要全局註冊每個組件。可以讓組件只能用在其它組件內，用實例選項components 註冊：

 var Child = Vue.extend({ /* ... */ })var Parent = Vue.extend({ template: '...', components: { // <my-component> 只能用在父組件模板內'my-component': Child }})

這種封裝也適用於其它資源，如指令、過濾器和過渡。

註冊語法糖

為了讓事件更簡單，可以直接傳入選項對象而不是構造器給Vue.component() 和component 選項。 Vue.js 在背後自動調用Vue.extend()：

 // 在一個步驟中擴展與註冊Vue.component('my-component', { template: '<div>A custom component!</div>'})// 局部註冊也可以這麼做var Parent = Vue.extend({ components: { 'my-component': { template: '<div>A custom component!</div>' } }})

組件選項問題

傳入Vue 構造器的多數選項也可以用在Vue.extend() 中，不過有兩個特例： data 和el。試想如果我們簡單地把一個對像作為data 選項傳給Vue.extend()：

 var data = { a: 1 }var MyComponent = Vue.extend({ data: data})

這麼做的問題是`MyComponent` 所有的實例將共享同一個`data` 對象！這基本不是我們想要的，因此我們應當使用一個函數作為`data` 選項，讓這個函數返回一個新對象：

 var MyComponent = Vue.extend({ data: function () { return { a: 1 } }})

同理，`el` 選項用在`Vue.extend()` 中時也須是一個函數。

模板解析

Vue 的模板是DOM 模板，使用瀏覽器原生的解析器而不是自己實現一個。相比字符串模板，DOM 模板有一些好處，但是也有問題，它必須是有效的HTML 片段。一些HTML 元素對什麼元素可以放在它裡面有限制。常見的限制：

•a 不能包含其它的交互元素（如按鈕，鏈接）

•ul 和ol 只能直接包含li

•select 只能包含option 和optgroup

•table 只能直接包含thead, tbody, tfoot, tr, caption, col, colgroup

•tr 只能直接包含th 和td

在實際中，這些限制會導致意外的結果。儘管在簡單的情況下它可能可以工作，但是你不能依賴自定義組件在瀏覽器驗證之前的展開結果。例如<my-select><option>...</option></my-select> 不是有效的模板，即使my-select 組件最終展開為<select>...</select>。

另一個結果是，自定義標籤（包括自定義元素和特殊標籤，如<component>、<template>、 <partial> ）不能用在ul, select, table 等對內部元素有限制的標籤內。放在這些元素內部的自定義標籤將被提到元素的外面，因而渲染不正確。

對於自定義元素，應當使用is 特性：

 <table> <tr is="my-component"></tr></table>

`` 不能用在`` 內，這時應使用``，`

` 可以有多個``：

 <table> <tbody v-for="item in items"> <tr>Even row</tr> <tr>Odd row</tr> </tbody></table>

Props

使用Props 傳遞數據

組件實例的作用域是孤立的。這意味著不能並且不應該在子組件的模板內直接引用父組件的數據。可以使用props 把數據傳給子組件。

“prop” 是組件數據的一個字段，期望從父組件傳下來。子組件需要顯式地用props 選項聲明props：

 Vue.component('child', { // 聲明props props: ['msg'], // prop 可以用在模板內// 可以用`this.msg` 設置template: '<span>{{ msg }}</span>'})

然後向它傳入一個普通字符串：

<child msg="hello!"></child>

駝峰式vs.橫槓式

HTML 特性不區分大小寫。名字形式為camelCase 的prop 用作特性時，需要轉為kebab-case（短橫線隔開）：

 Vue.component('child', { // camelCase in JavaScript props: ['myMessage'], template: '<span>{{ myMessage }}</span>'})<!-- kebab-case in HTML --><child my-message="hello!"></child>

動態Props

類似於用v-bind 綁定HTML 特性到一個表達式，也可以用v-bind 綁定動態Props 到父組件的數據。每當父組件的數據變化時，也會傳導給子組件：

 <div> <input v-model="parentMsg"> <br> <child v-bind:my-message="parentMsg"></child></div>

使用`v-bind` 的縮寫語法通常更簡單：

<child :my-message="parentMsg"></child>

字面量語法vs. 動態語法

初學者常犯的一個錯誤是使用字面量語法傳遞數值：

<!-- 傳遞了一個字符串"1" -->

<comp some-prop="1"></comp>

因為它是一個字面prop，它的值以字符串`”1”` 而不是以實際的數字傳下去。如果想傳遞一個實際的JavaScript 數字，需要使用動態語法，從而讓它的值被當作JavaScript 表達式計算：

<!-- 傳遞實際的數字-->

<comp :some-prop="1"></comp>

Prop 綁定類型

prop 默認是單向綁定：當父組件的屬性變化時，將傳導給子組件，但是反過來不會。這是為了防止子組件無意修改了父組件的狀態――這會讓應用的數據流難以理解。不過，也可以使用.sync 或.once 綁定修飾符顯式地強制雙向或單次綁定：

比較語法：

 <!-- 默認為單向綁定--><child :msg="parentMsg"></child><!-- 雙向綁定--><child :msg.sync="parentMsg"></child><!-- 單次綁定--><child :msg.once="parentMsg"></child>

雙向綁定會把子組件的msg 屬性同步回父組件的parentMsg 屬性。單次綁定在建立之後不會同步之後的變化。

注意如果prop 是一個對像或數組，是按引用傳遞。在子組件內修改它會影響父組件的狀態，不管是使用哪種綁定類型。

Prop 驗證

組件可以為props 指定驗證要求。當組件給其他人使用時這很有用，因為這些驗證要求構成了組件的API，確保其他人正確地使用組件。此時props 的值是一個對象，包含驗證要求：

 Vue.component('example', { props: { // 基礎類型檢測（`null` 意思是任何類型都可以） propA: Number, // 多種類型(1.0.21+) propM: [String, Number], // 必需且是字符串propB: { type: String, required: true }, // 數字，有默認值propC: { type: Number, default: 100 }, // 對象/數組的默認值應當由一個函數返回propD: { type: Object, default: function () { return { msg: 'hello' } } }, // 指定這個prop 為雙向綁定// 如果綁定類型不對將拋出一條警告propE: { twoWay: true }, // 自定義驗證函數propF: { validator: function (value) { return value > 10 } }, // 轉換函數（1.0.12 新增） // 在設置值之前轉換值propG: { coerce: function (val) { return val + '' // 將值轉換為字符串} }, propH: { coerce: function (val) { return JSON.parse(val) // 將JSON 字符串轉換為對象} } }})

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

•String

•Number

•Boolean

•Function

•Object

•Array

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

當prop 驗證失敗了，Vue 將拒絕在子組件上設置此值，如果使用的是開發版本會拋出一條警告。

父子組件通信

父鏈

子組件可以用this.$parent 訪問它的父組件。根實例的後代可以用this.$root 訪問它。父組件有一個數組this.$children，包含它所有的子元素。

儘管可以訪問父鏈上任意的實例，不過子組件應當避免直接依賴父組件的數據，盡量顯式地使用props 傳遞數據。另外，在子組件中修改父組件的狀態是非常糟糕的做法，因為：

1.這讓父組件與子組件緊密地耦合；

2.只看父組件，很難理解父組件的狀態。因為它可能被任意子組件修改！理想情況下，只有組件自己能修改它的狀態。

自定義事件

Vue 實例實現了一個自定義事件接口，用於在組件樹中通信。這個事件系統獨立於原生DOM 事件，用法也不同。

每個Vue 實例都是一個事件觸發器：

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

•使用$emit() 在它上面觸發事件；

•使用$dispatch() 派發事件，事件沿著父鏈冒泡；

•使用$broadcast() 廣播事件，事件向下傳導給所有的後代。

不同於DOM 事件，Vue 事件在冒泡過程中第一次觸發回調之後自動停止冒泡，除非回調明確返回true。

簡單例子：

 <!-- 子組件模板--><template id="child-template"> <input v-model="msg"> <button v-on:click="notify">Dispatch Event</button></template><!-- 父組件模板--><div id="events-example"> <p>Messages: {{ messages | json }}</p> <child></child></div>// 註冊子組件// 將當前消息派發出去Vue.component('child', { template: '#child-template', data: function () { return { msg: 'hello' } }, methods: { notify: function () { if (this.msg.trim()) { this.$dispatch('child-msg', this.msg) this.msg = '' } } }})// 初始化父組件// 將收到消息時將事件推入一個數組var parent = new Vue({ el: '#events-example', data: { messages: [] }, // 在創建實例時`events` 選項簡單地調用`$on` events: { 'child-msg': function (msg) { // 事件回調內的`this` 自動綁定到註冊它的實例上this.messages.push(msg) } }})

使用v-on 綁定自定義事件

上例非常好，不過從父組件的代碼中不能直觀的看到"child-msg" 事件來自哪裡。如果我們在模板中子組件用到的地方聲明事件處理器會更好。為此子組件可以用v-on 監聽自定義事件：

<child v-on:child-msg="handleIt"></child>

這樣就很清楚了：當子組件觸發了`”child-msg”` 事件，父組件的`handleIt` 方法將被調用。所有影響父組件狀態的代碼放到父組件的`handleIt` 方法中；子組件只關注觸發事件。

子組件索引

儘管有props 和events，但是有時仍然需要在JavaScript 中直接訪問子組件。為此可以使用v-ref 為子組件指定一個索引ID。例如：

 <div id="parent"> <user-profile v-ref:profile></user-profile></div>var parent = new Vue({ el: '#parent' })// 訪問子組件var child = parent.$refs.profile

v-ref 和v-for 一起用時，ref 是一個數組或對象，包含相應的子組件。

使用Slot 分發內容

在使用組件時，常常要像這樣組合它們：

 <app> <app-header></app-header> <app-footer></app-footer></app>

注意兩點：

1.<app> 組件不知道它的掛載點會有什麼內容，掛載點的內容是由<app> 的父組件決定的。

2.<app> 組件很可能有它自己的模板。

為了讓組件可以組合，我們需要一種方式來混合父組件的內容與子組件自己的模板。這個處理稱為內容分發（或“transclusion”，如果你熟悉Angular）。 Vue.js 實現了一個內容分發API，參照了當前Web 組件規範草稿，使用特殊的<slot> 元素作為原始內容的插槽。

編譯作用域

在深入內容分發API 之前，我們先明確內容的編譯作用域。假定模板為：

<child-component>

{{ msg }}

</child-component>

msg 應該綁定到父組件的數據，還是綁定到子組件的數據？答案是父組件。組件作用域簡單地說是：

父組件模板的內容在父組件作用域內編譯；子組件模板的內容在子組件作用域內編譯

一個常見錯誤是試圖在父組件模板內將一個指令綁定到子組件的屬性/方法：

<!-- 無效-->

<child-component v-show="someChildProperty"></child-component>

假定someChildProperty 是子組件的屬性，上例不會如預期那樣工作。父組件模板不應該知道子組件的狀態。

如果要綁定子組件內的指令到一個組件的根節點，應當在它的模板內這麼做：

 Vue.component('child-component', { // 有效，因為是在正確的作用域內template: '<div v-show="someChildProperty">Child</div>', data: function () { return { someChildProperty: true } }})

類似地，分發內容是在父組件作用域內編譯。

單個Slot

父組件的內容將被拋棄，除非子組件模板包含<slot>。如果子組件模板只有一個沒有特性的slot，父組件的整個內容將插到slot 所在的地方並替換它。

<slot> 標籤的內容視為回退內容。回退內容在子組件的作用域內編譯，當宿主元素為空並且沒有內容供插入時顯示這個回退內容。

假定my-component 組件有下面模板：

 <div> <h1>This is my component!</h1> <slot> 如果沒有分發內容則顯示我。 </slot></div>

父組件模板：

<my-component>

<p>This is some original content</p>

<p>This is some more original content</p>

</my-component>

渲染結果：

 <div> <h1>This is my component!</h1> <p>This is some original content</p> <p>This is some more original content</p></div>

具名Slot

<slot> 元素可以用一個特殊特性name 配置如何分發內容。多個slot 可以有不同的名字。具名slot 將匹配內容片段中有對應slot 特性的元素。

仍然可以有一個匿名slot，它是默認slot，作為找不到匹配的內容片段的回退插槽。如果沒有默認的slot，這些找不到匹配的內容片段將被拋棄。

例如，假定我們有一個multi-insertion 組件，它的模板為：

 <div> <slot name="one"></slot> <slot></slot> <slot name="two"></slot></div>

父組件模板：

 <multi-insertion> <p slot="one">One</p> <p slot="two">Two</p> <p>Default A</p></multi-insertion>

渲染結果為：

 <div> <p slot="one">One</p> <p>Default A</p> <p slot="two">Two</p></div>

在組合組件時，內容分發API 是非常有用的機制。

動態組件

多個組件可以使用同一個掛載點，然後動態地在它們之間切換。使用保留的<component> 元素，動態地綁定到它的is 特性：

 new Vue({ el: 'body', data: { currentView: 'home' }, components: { home: { /* ... */ }, posts: { /* ... */ }, archive: { /* ... */ } }})<component :is="currentView"> <!-- 組件在vm.currentview 變化時改變--></component>

keep-alive

如果把切換出去的組件保留在內存中，可以保留它的狀態或避免重新渲染。為此可以添加一個keep-alive 指令參數：

<component :is="currentView" keep-alive>

<!-- 非活動組件將被緩存-->

</component>

activate 鉤子

在切換組件時，切入組件在切入前可能需要進行一些異步操作。為了控制組件切換時長，給切入組件添加activate 鉤子：

 Vue.component('activate-example', { activate: function (done) { var self = this loadDataAsync(function (data) { self.someData = data done() }) }})

注意`activate` 鉤子只作用於動態組件切換或靜態組件初始化渲染的過程中，不作用於使用實例方法手工插入的過程中。

transition-mode

transition-mode 特性用於指定兩個動態組件之間如何過渡。

在默認情況下，進入與離開平滑地過渡。這個特性可以指定另外兩種模式：

•in-out：新組件先過渡進入，等它的過渡完成之後當前組件過渡出去。

•out-in：當前組件先過渡出去，等它的過渡完成之後新組件過渡進入。

示例：

 <!-- 先淡出再淡入--><component :is="view" transition="fade" transition-mode="out-in"></component>.fade-transition { transition: opacity .3s ease;}.fade-enter, .fade-leave { opacity: 0;}

雜項

組件和v-for

自定義組件可以像普通元素一樣直接使用v-for：

<my-component v-for="item in items"></my-component>

但是，不能傳遞數據給組件，因為組件的作用域是孤立的。為了傳遞數據給組件，應當使用props：

<my-component

v-for="item in items"

:item="item"

:index="$index">

</my-component>

不自動把item 注入組件的原因是這會導致組件跟當前v-for 緊密耦合。顯式聲明數據來自哪裡可以讓組件復用在其它地方。

編寫可複用組件

在編寫組件時，記住是否要復用組件有好處。一次性組件跟其它組件緊密耦合沒關係，但是可複用組件應當定義一個清晰的公開接口。

Vue.js 組件API 來自三部分――prop，事件和slot：

•prop 允許外部環境傳遞數據給組件；

•事件允許組件觸發外部環境的action；

•slot 允許外部環境插入內容到組件的視圖結構內。

使用v-bind 和v-on 的簡寫語法，模板的縮進清楚且簡潔：

<my-component

:foo="baz"

:bar="qux"

@event-a="doThis"

@event-b="doThat">

<!-- content -->

<img slot="icon" src="...">

<p slot="main-text">Hello!</p>

</my-component>

異步組件

在大型應用中，我們可能需要將應用拆分為小塊，只在需要時才從服務器下載。為了讓事情更簡單，Vue.js 允許將組件定義為一個工廠函數，動態地解析組件的定義。 Vue.js 只在組件需要渲染時觸發工廠函數，並且把結果緩存起來，用於後面的再次渲染。例如：

 Vue.component('async-example', function (resolve, reject) { setTimeout(function () { resolve({ template: '<div>I am async!</div>' }) }, 1000)})

工廠函數接收一個resolve 回調，在收到從服務器下載的組件定義時調用。也可以調用reject(reason) 指示加載失敗。這裡setTimeout 只是為了演示。怎麼獲取組件完全由你決定。推薦配合使用Webpack 的代碼分割功能：

 Vue.component('async-webpack-example', function (resolve) { // 這個特殊的require 語法告訴webpack // 自動將編譯後的代碼分割成不同的塊， // 這些塊將通過ajax 請求自動下載。 require(['./my-async-component'], resolve)})

資源命名約定

一些資源，如組件和指令，是以HTML 特性或HTML 自定義元素的形式出現在模板中。因為HTML 特性的名字和標籤的名字不區分大小寫，所以資源的名字通常需使用kebab-case 而不是camelCase 的形式，這不大方便。

Vue.js 支持資源的名字使用camelCase 或PascalCase 的形式，並且在模板中自動將它們轉為kebab-case（類似於prop 的命名約定）：

 // 在組件定義中components: { // 使用camelCase 形式註冊myComponent: { /*... */ }}<!-- 在模板中使用kebab-case 形式--><my-component></my-component>ES6 對象字面量縮寫也沒問題：// PascalCaseimport TextBox from './components/text-box';import DropdownMenu from './components/dropdown-menu';export default { components: { // 在模板中寫作<text-box> 和<dropdown-menu> TextBox, DropdownMenu }}

遞歸組件

組件在它的模板內可以遞歸地調用自己，不過，只有當它有name 選項時才可以：

 var StackOverflow = Vue.extend({ name: 'stack-overflow', template: '<div>' + // 遞歸地調用它自己'<stack-overflow></stack-overflow>' + '</div>'})

上面組件會導致一個錯誤“max stack size exceeded”，所以要確保遞歸調用有終止條件。當使用Vue.component() 全局註冊一個組件時，組件ID 自動設置為組件的name 選項。

片斷實例

在使用template 選項時，模板的內容將替換實例的掛載元素。因而推薦模板的頂級元素始終是單個元素。

不這麼寫模板：

<div>root node 1</div>

<div>root node 2</div>

推薦這麼寫：

<div>

I have a single root node!

<div>node 1</div>

<div>node 2</div>

</div>

下面幾種情況會讓實例變成一個片斷實例：

1.模板包含多個頂級元素。

2.模板只包含普通文本。

3.模板只包含其它組件（其它組件可能是一個片段實例）。

4.模板只包含一個元素指令，如<partial> 或vue-router 的<router-view>。

5.模板根節點有一個流程控制指令，如v-if 或v-for。

這些情況讓實例有未知數量的頂級元素，它將把它的DOM 內容當作片斷。片斷實例仍然會正確地渲染內容。不過，它沒有一個根節點，它的$el 指向一個錨節點，即一個空的文本節點（在開發模式下是一個註釋節點）。

但是更重要的是，組件元素上的非流程控制指令，非prop 特性和過渡將被忽略，因為沒有根元素供綁定：

<!-- 不可以，因為沒有根元素-->

<example v-show="ok" transition="fade"></example>

<!-- props 可以-->

<example :prop="someData"></example>

<!-- 流程控制可以，但是不能有過渡-->

<example v-if="ok"></example>

當然片斷實例有它的用處，不過通常給組件一個根節點比較好。它會保證組件元素上的指令和特性能正確地轉換，同時性能也稍微好些。

內聯模板

如果子組件有inline-template 特性，組件將把它的內容當作它的模板，而不是把它當作分發內容。這讓模板更靈活。

<my-component inline-template>

<p>These are compiled as the component's own template</p>

<p>Not parent's transclusion content.</p>

</my-component>

但是inline-template 讓模板的作用域難以理解，並且不能緩存模板編譯結果。最佳實踐是使用template 選項在組件內定義模板。

本文已被整理到了《Vue.js前端組件學習教程》，歡迎大家學習閱讀。

關於vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。