Vue——關於自定義組件

如今基於vue的UI組件庫有不少，好比iview，element-ui等。但有時候這些組件庫知足不了咱們的開發需求，這時候咱們就須要本身寫一個插件。

舉第一個栗子

用vue-cli搭建好項目目錄以後，在src/components下面新建一個文件夾放咱們要寫的插件，如圖所示:

index.vue裏寫咱們的組件，代碼以下：

index.js裏面寫index.vue的install方法，並用Vue.component註冊組件，代碼以下：

接下來咱們要在默認的main.js裏將剛剛寫的index.js文件導入，並經過Vue.use來使用它，代碼以下：

大功告成，接下來在app.vue裏直接使用就能夠啦，能夠看到頁面已經顯示相應的組件了，如圖：

這時候咱們還能夠自定義click事件，並經過參數的方式傳遞給咱們的插件，插件能夠經過props屬性獲取到該事件，如圖：

能夠看到頁面已經生效了：

Vue.component(id, [definition])用於註冊或獲取組件。

Vue.use(plugin)用於安裝 Vue.js 插件。若是插件是一個對象，必須提供 install 方法。若是插件是一個函數，它會被做爲 install 方法。install 方法調用時，會將 Vue 做爲參數傳入。當 install 方法被同一個插件屢次調用，插件將只會被安裝一次。

舉第二個栗子

咱們再建一個文件夾，如圖：

咱們要寫一個組件，可以顯示外部傳進來的內容，並在3秒後自動消失，代碼以下：

接下來咱們要在index.js裏使用構造器來建立它，如圖：

依舊在默認的main.js裏引用剛剛的js文件，並加入到Vue實例上，這樣咱們就能夠直接經過this.$seconddemo()來調用了，代碼以下：

import SecondDemo from './components/global/seconddemo/index'
Vue.prototype.$seconddemo = SecondDemo
複製代碼

在app.vue裏使用它，發現插件加載成功了，如圖：

Vue.extend(options)是 Vue 的構造器，用於建立一個「子類」。

統一管理自定義組件

當組件數量不少時，咱們能夠經過提供一個統一的出口文件來管理這些自定義組件，首先在global文件夾下新建一個index.js文件，代碼如圖：

index.js文件幫咱們把全部自定義的組件都經過Vue.component註冊了，最後export一個包含install方法的對象給Vue.use()使用。

這時候咱們不須要在main.js裏逐個添加動態組件了，只須要導入統一的index.js文件，並用Vue.use它就ok了。

import global from './components/global/index.js'
Vue.use(global)
複製代碼