Vue全局引入自定义组件

1. 书写组件

<!-- index.vue -->
<template>
  <button class="h-button" :type="type">
    <slot></slot>
  </button>
</template>
<script>
export default {
  props:{
    type:{
      type:String,
      default:'button'
    }
  },
  data(){
    return{

    }
  }
}
</script>

2. 暴露install()方法

// index.js
import HButton from './index.vue';
HButton.install=function(Vue){
  Vue.component('HButton',HButton) // (组件名称，对应组件)
}
export default HButton;

3. 全局注册

// main.js
// @ is an alias to /src
import HButton from '@/components/Btn/index'
Vue.use(HButton)

4. 使用

<!-- Home.vue 使用 -->
<template>
  <div class="home">
    <h-button>组件使用</h-button>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
};
</script>