什么是組件？

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

使用組件：

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

局部注冊：不必在全局注冊每個組件。通過使用組件實例選項注冊，可以使組件僅在另一個實例/組件的作用域中可用

data 必須是函數(shù)：

使用組件時，大多數(shù)選項可以被傳入到 Vue 構(gòu)造器中，有一個例外： data 必須是函數(shù)。 實際上，如果你這么做

那么 Vue 會在控制臺發(fā)出警告，告訴你在組件中 data 必須是一個函數(shù)。最好理解這種規(guī)則的存在意義

由于這三個組件共享了同一個 data ， 因此增加一個 counter 會影響所有組件！我們可以通過為每個組件返回新的 data 對象來解決這個問題

構(gòu)成組件：

props：在子組件中通過props屬性注冊(比如注冊一個僅僅包含一個值的數(shù)組),當在父組件中使用子組件的時候,可以在子組件的標簽中添加一個屬性,屬性名就是通過props注冊的數(shù)組中的那個唯一的值,然后給這個屬性所添加的屬性值就可以在子組件代碼中通過’this.props數(shù)組中的值’的格式獲取到從父組件中傳遞過來的值

在父組件中給子組件的props屬性message傳遞的值，可以在子組件中被接收到，并展現(xiàn)在template模板中

camelCase vs. kebab-case:HTML 特性不區(qū)分大小寫。當使用非字符串模版時，prop的名字形式會從 camelCase 轉(zhuǎn)為 kebab-case（短橫線隔開）

動態(tài) Props：類似于用 v-bind 綁定 HTML 特性到一個表達式，也可以用 v-bind 動態(tài)綁定 props 的值到父組件的數(shù)據(jù)中。每當父組件的數(shù)據(jù)變化時，該變化也會傳導(dǎo)給子組件

自定義事件：我們知道，父組件是使用 props 傳遞數(shù)據(jù)給子組件，但如果子組件要把數(shù)據(jù)傳遞回去，應(yīng)該怎樣做？那就是自定義事件

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

每個 Vue 實例都實現(xiàn)了事件接口(Events interface)，即：

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

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

在組件樹中通信，當在子組件中觸發(fā)某個特定的自定義事件的時候，通過自定義事件接口將該事件和某些信息傳遞給父組件，從而在父組件中觸發(fā)對應(yīng)的自定義事件來展示從子組件中傳遞過來的信息(需要注意的是'$on'和'$emit'可以直接在父組件的標簽中用’v-on:事件名稱’來監(jiān)聽)

使用自定義事件的表單輸入控件：

自定義事件也可以用來創(chuàng)建自定義的表單輸入組件，使用 v-model 來進行數(shù)據(jù)雙向綁定

僅僅是一個語法糖

當用戶觸發(fā)input事件，輸入新的value值的時候，動態(tài)的修改value屬性的值

（未完）

總結(jié)

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

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