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

1. 全局注冊

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

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

輸出：

2. 局部注冊

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

輸出：

3.data必須是函數(shù)

構(gòu)造 Vue 實(shí)例時(shí)傳入的各種選項(xiàng)大多數(shù)都可以在組件里使用。只有一個(gè)例外：data必須是函數(shù)。

4.組件組合

在 Vue 中，父子組件的關(guān)系可以總結(jié)為prop 向下傳遞，事件向上傳遞。父組件通過prop給子組件下發(fā)數(shù)據(jù)，子組件通過事件給父組件發(fā)送消息。看看它們是怎么工作的。

4.1使用 Prop 傳遞數(shù)據(jù)

組件實(shí)例的作用域是孤立的。這意味著不能 (也不應(yīng)該) 在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。父組件的數(shù)據(jù)需要通過prop才能下發(fā)到子組件中。

子組件要顯式地用props選項(xiàng)聲明它預(yù)期的數(shù)據(jù)：

4.2 動(dòng)態(tài)Prop

我們可以用v-bind來動(dòng)態(tài)地將 prop 綁定到父組件的數(shù)據(jù)。每當(dāng)父組件的數(shù)據(jù)變化時(shí)，該變化也會(huì)傳導(dǎo)給子組件：

4.3單向數(shù)據(jù)流

Prop 是單向綁定的：當(dāng)父組件的屬性變化時(shí)，將傳導(dǎo)給子組件，但是反過來不會(huì)。這是為了防止子組件無意間修改了父組件的狀態(tài)，來避免應(yīng)用的數(shù)據(jù)流變得難以理解

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

Prop 作為初始值傳入后，子組件想把它當(dāng)作局部數(shù)據(jù)來用；

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

注意：在 JavaScript 中對象和數(shù)組是引用類型，指向同一個(gè)內(nèi)存空間，如果 prop 是一個(gè)對象或數(shù)組，在子組件內(nèi)部改變它會(huì)影響父組件的狀態(tài)。

4.4Prop 驗(yàn)證

我們可以為組件的 prop 指定驗(yàn)證規(guī)則。如果傳入的數(shù)據(jù)不符合要求，Vue 會(huì)發(fā)出警告。這對于開發(fā)給他人使用的組件非常有用。

要指定驗(yàn)證規(guī)則，需要用對象的形式來定義 prop，而不能用字符串?dāng)?shù)組：

4.5非 Prop 特性

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

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

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

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

4.6替換/合并現(xiàn)有的特性

在這個(gè)例子當(dāng)中，我們定義了兩個(gè)不同的class值：

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。