Vue自定义全局组件install的实现

Vue自定义全局组件install的实现

在一些Vue的开源组件中我们常常会看到一个install()方法来注册全局组件，而它的实现方式其实是非常简单的。
1.首先建立一个公用的组件。

// Cmponent.vue 公用的组件
<template>
    <div>我是组件</div>
</template>
 
<script>
    export default {
 		name: 'Cmponent'
    }
</script>

2.新建一个index.js文件。

import Cmponent from './Cmponent.vue'
Cmponent.install = function(Vue) {
  Vue.component(Cmponent.name, Cmponent)
}
export default Cmponent

3.在main.js文件中注册

import Cmponent from '@/components/Cmponent'; 
// 全局注册
Vue.use(Cmponent);

4.使用组件。

<template>
   <div>
      <cmponent />
   </div>    
</template>