vue中全局组件的封装与使用

一、写好组件

二、子组件添加install方法

创建一个js文件，我将此文件命名为button.js，js文件代码如下：

import ButtonComponent from './Button.vue'

// 添加install方法
const Button = {
  install: function (Vue) {
    Vue.component("Button", ButtonComponent);
  }
}

// 导出
export default Button

三、在 main.js 中引用

import Vue from 'vue'
import App from './App.vue'

import Button from '@/components/Button.js'//引用全局组件Button

Vue.use(Button);//使用全局组件Button

new Vue({
  render: h => h(App),
}).$mount('#app')

四、在页面中使用