把组件封装为一个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>

 

 有问题，欢迎大家留言交流~，转载请备明出处。