什么是組件？

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

使用組件：

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

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

data 必須是函數：

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

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

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

構成組件：

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

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

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

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

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

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

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

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

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

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

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

自定義事件也可以用來創建自定義的表單輸入組件，使用 v-model 來進行數據雙向綁定

僅僅是一個語法糖

當用戶觸發input事件，輸入新的value值的時候，動態的修改value屬性的值

（未完）

總結

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

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