官網(wǎng)：   https://cn.vuejs.org/v2/guide/components.html 

1.Vue組件的介紹

組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。

所有的 Vue 組件同時(shí)也都是 Vue 的實(shí)例，所以可接受相同的選項(xiàng)對(duì)象 (除了一些根級(jí)特有的選項(xiàng)) 并提供相同的生命周期鉤子。

2.使用組件

對(duì)于自定義標(biāo)簽的命名 Vue.js 不強(qiáng)制遵循W3C 規(guī)則(小寫(xiě)，并且包含一個(gè)短杠)

組件在注冊(cè)之后，便可以作為自定義元素  在一個(gè)實(shí)例的模板中使用。

注意：在初始化根實(shí)例之前注冊(cè)組件

注冊(cè)組件的時(shí)候，首先要編寫(xiě)需要的組件（相當(dāng)于一個(gè)頁(yè)面，包含js操作，css樣式等），比如：

新建一個(gè)頭部組件

上面這個(gè)頭部組件只有一句話(huà)，放在h標(biāo)簽中，使用的時(shí)候，需要先導(dǎo)出組件，即（export default 塊），這樣才能在需要該組件的位置使用import導(dǎo)入

export 和 export default使用的區(qū)別：

兩個(gè)都是用于導(dǎo)出

不同之處在于：

export導(dǎo)出之后，在要接收的地方需要 import {變量名} from “位置”

此處，我在js文件中導(dǎo)出一個(gè)data的方法，然后在vue文件（組件）中使用

輸出組件

需要的地方使用

export default導(dǎo)出之后，接收的地方 import 變量名 from “位置”

注意: ./ 代表當(dāng)前位置

輸出組件

在需要使用的位置import

接下來(lái)開(kāi)始使用組件：

使用組件時(shí)需要先創(chuàng)建一個(gè)Vue實(shí)例，然后選中需要放置組件的位置（element），然后注冊(cè)組件，放入選定的位置

完成以上步驟，即可顯示組件在頁(yè)面上

頁(yè)面顯示結(jié)果圖

總結(jié)