大家好，本篇文章我將帶著大家一起學習如何編寫自定義組件(Components)，通過「vue基礎」新手快速入門篇(一)這篇文章的學習，我們知道了 Vue 設計的目的就是為了方便我們創建基于組件UI的項目。基于這個設計原則，我們可以更專注于設計可重用、各自獨立、基于接口方式的組件，就好比樂高玩具一樣，我們可以基于組件組裝我們的項目。

首先我們來看一個簡單的例子，比如我們有一個頭像的組件(avatar)用來展示用戶的頭像，我們只需要創建一次，我們就可以隨意將此組件添加至項目需要用到的地方，十分方便。比如如下的集成方式：

從上述代碼我們可以看出，在項目中集成組件十分方便，就類似一個 HTML 標簽，這個標簽我們可以自定義，比如這個例子，我們定義的是 , 除了自定義標簽，你還可以自定義任何屬性，同時可利用屬性進行傳值，比如這個例子我們自定義了src屬性。

自定義組件

接下來，我們來學習如何編寫Vue自定義組件。

首先我們來先了解下，在 「vue基礎」新手快速入門篇(一)這篇文章我們通過引入JS文件快速熟悉了Vue,基于這種方式我們如何自定義組件呢。我們可以使用 Vue 這個全局對象聲明組件，聲明的函數接受兩個參數，一個是組件的名稱，一個是組件設置相關的參數對象，基于這種方式，我們可以用如下的方式，快速自定義組件：

關于組件的命名，你可以選擇kebab case(短橫線命名)的方式，例如 my-custom-componen，或者使用 pascal case(帕斯卡命名)首字母大寫的方式進行命名，例如 MyCustomComponent，個人比較推薦使用 pascal case。

通過這種方式注冊的組件可以在項目中的任何位置進行使用，并可以嵌套在其他組件的模板里，這樣大大提高了我們開發的靈活性。

在本系列的上一篇文章里「vue基礎」Vue相關構建工具和基礎插件簡介，我們介紹了單文件組件(single file components：SFCs) ，并且簡單的介紹了如何聲明組件，通過這種方式聲明的組件，我們需要通過import的方式進行引用才能進行使用。在后面我會詳細進行介紹。

組件參數介紹

通過Vue對象進行組件聲明的設置相關參數和使用 new Vue 方式進行實例化的設置參數基本一致(這篇文章 「vue基礎」新手快速入門篇(一)有介紹)，但是還有兩個重要的區別。

首先，組件不接受 el 這個參數，你需要提供 template 屬性進行設置模板的內容。

字符串模板

如果字符串內容以 # 開頭，Vue將會視為選擇器，并在 DOM 中查找匹配的元素，然后將其內容作為模板的內容，如下所示：

DOM模板

如果你使用 SFCs 的方式創建組件，你需要使用 這樣的標記在你的.vue文件中，如下所示：

HelloWorld.vue

第二個不一樣的地方就是組件的 data 參數屬性必須是個函數聲明，通過return的形式返回數據，每個組件包含一個數據對象實例。如下段代碼所示：

親自動手實踐一個簡單的自定義組件

好了，接下來我們重新回到 「vue基礎」新手快速入門篇(一)這篇文章的一個示例，我們來親自動手將這個例子改寫成一個 SFCs 方式的自定義組件，首先我門來看下原先示例的代碼，關于代碼的說明，這里我就不多說了，大家可以返會入門篇進行查看：

效果如下圖：

我們將會新建個 .vue 文件，首先你先通過構建工具創建一個Vue項目，不知道怎么創建的朋友們，可以看我的上一篇文章「vue基礎」Vue相關構建工具和基礎插件簡介，里面有詳細介紹，接下來我們按照默認的方式創建一個 Vue 項目。

打開項目文件夾，在 src/components 路徑下，我們來創建一個 StaffDirectory.vue 的文件，按照如下的步驟添加代碼，示例如下：

template部分(src/components/StaffDirectory.vue)

你可能會注意到我們基本沒什么改動，直接把對應的相關區域復制到 標簽內，但是有一點你需要各位注意，最外層一定要有個閉合標簽，最外層不能多于1個，因此我們模板的最外層標簽是:

腳本部分(src/components/StaffDirectory.vue )

你會注意到我們使用了 export 這個關鍵詞，這是ES6+的新語法，允許我們通過模塊導入的形式，在其他的組件文件里進行使用。

你可能還會注意到，我們這里有個 name 的屬性，這個屬性也很重要，它將會比較方便的輔助我們進行調試定位問題，稍后的文章會有介紹。因此千萬別漏掉這個屬性的設置。

樣式部分(src / StaffDirectory.vue)

最后完成的組件代碼，如下圖所示：

最后在 App.vue 文件引入我們的組件

我們可以使用import語法進行引入我們的組件，示例代碼如下：

你可能會注意這里我們導入了一個CSS樣式庫，在第一篇文章里我們是將CSS文件直接引入，這里你需要通過 npm 的安裝這個CSS框架，相關命令：npm install semantic-ui-css

好了，到這里我們就完成了上篇文章的例子，通過 SFCs 的組件方式進行了改造，你可以通過npm run serve 看看運行效果是否一致。

小節

由于文章篇幅有限，關于組件的介紹，今天就介紹到這里，我們一起學習了如何編寫一個簡單的自定義組件，下一篇文章我們將繼續深入學習組件的相關內容，比如組件的生命周期、屬性傳值、父子組件傳值、槽(Slots)，敬請期待。

vue基礎相關文章

「vue基礎」新手快速入門篇(一)

「vue基礎」Vue相關構建工具和基礎插件簡介

總結

以上是生活随笔為你收集整理的vue 如何生成一个dom元素_通过一个简单的示例学习如何编写Vue组件的全部內容，希望文章能夠幫你解決所遇到的問題。

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