把組件封裝為一個vue插件的簡單方法

第一步，編寫你的組件ShopSelect/index.vue（此處模板內容省略）

第二步，在組件同級目錄新建index.js,引入上面的組件，並暴露一個install方法

import ShopSelect from './index.vue'

export default {
  install: function (Vue) {
    Vue.component(ShopSelect.name, ShopSelect)
  }
} 

開發一個插件的方法詳見官網，這里采用同element-ui庫的方法即Vue注冊全局組件（Vue.component）

第三步，在src/main.js引入並使用插件

import ShopSelect from '@/components/ShopSelect/index.js'
Vue.use(ShopSelect)

第四步，在模板內直接使用

<shop-select @shopChange="shopChange"></shop-select>

 

 有問題，歡迎大家留言交流~，轉載請備明出處。