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

1. 全局注冊

要注冊一個全局組件，可以使用Vue.component(tagName, options)。例如：

組件在注冊之后，便可以作為自定義元素<my-component></my-component>在一個實例的模板中使用。注意確保在初始化根實例之前注冊組件：

輸出：

2. 局部注冊

你不必把每個組件都注冊到全局。你可以通過某個 Vue 實例/組件的實例選項components注冊僅在其作用域中可用的組件：

輸出：

3.data必須是函數

構造 Vue 實例時傳入的各種選項大多數都可以在組件里使用。只有一個例外：data必須是函數。

4.組件組合

在 Vue 中，父子組件的關系可以總結為prop 向下傳遞，事件向上傳遞。父組件通過prop給子組件下發數據，子組件通過事件給父組件發送消息。看看它們是怎么工作的。

4.1使用 Prop 傳遞數據

組件實例的作用域是孤立的。這意味著不能 (也不應該) 在子組件的模板內直接引用父組件的數據。父組件的數據需要通過prop才能下發到子組件中。

子組件要顯式地用props選項聲明它預期的數據：

4.2 動態Prop

我們可以用v-bind來動態地將 prop 綁定到父組件的數據。每當父組件的數據變化時，該變化也會傳導給子組件：

4.3單向數據流

Prop 是單向綁定的：當父組件的屬性變化時，將傳導給子組件，但是反過來不會。這是為了防止子組件無意間修改了父組件的狀態，來避免應用的數據流變得難以理解

在兩種情況下，我們很容易忍不住想去修改 prop 中數據：

Prop 作為初始值傳入后，子組件想把它當作局部數據來用；

Prop 作為原始數據傳入，由子組件處理成其它數據輸出

注意：在 JavaScript 中對象和數組是引用類型，指向同一個內存空間，如果 prop 是一個對象或數組，在子組件內部改變它會影響父組件的狀態。

4.4Prop 驗證

我們可以為組件的 prop 指定驗證規則。如果傳入的數據不符合要求，Vue 會發出警告。這對于開發給他人使用的組件非常有用。

要指定驗證規則，需要用對象的形式來定義 prop，而不能用字符串數組：

4.5非 Prop 特性

所謂非 prop 特性，就是指它可以直接傳入組件，而不需要定義相應的 prop。

盡管為組件定義明確的 prop 是推薦的傳參方式，組件的作者卻并不總能預見到組件被使用的場景。所以，組件可以接收任意傳入的特性，這些特性都會被添加到組件的根元素上。

假設我們使用了第三方組件bs-date-input，它包含一個 Bootstrap 插件，該插件需要在input上添加data-3d-date-picker這個特性。這時可以把特性直接添加到組件上 (不需要事先定義prop)：

添加屬性data-3d-date-picker="true"之后，它會被自動添加到bs-date-input的根元素上。

4.6替換/合并現有的特性

在這個例子當中，我們定義了兩個不同的class值：

form-control，來自組件自身的模板
date-picker-theme-dark，來自父組件

對于多數特性來說，傳遞給組件的值會覆蓋組件本身設定的值。即例如傳遞type="large"將會覆蓋type="date"且有可能破壞該組件！所幸我們對待class和style特性會更聰明一些，這兩個特性的值都會做合并 (merge) 操作，讓最終生成的值為：form-control date-picker-theme-dark。

總結

以上是生活随笔為你收集整理的vue学习之组件(component)(一)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。