VUE中全局组件的封装与使用方法

1.自定义组件

<template>
  <div class="HelloWorld">
    <slot/>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  // 传入子组件的参数写到props
  props: {
    
  }
}
</script>
 
<style scoped lang="scss">
  .HelloWorld{ width: 100%; font-size: 14px; }
</style>

2.给自定义的组件添加install方法

import HelloWorldfrom './BreadCrumb'
 
// 添加install方法
HelloWorld.install = function(Vue) {
  Vue.component(HelloWorld.name, HelloWorld);
};
 
export default HelloWorld;

3.在 main.js 中引用

import Vue from 'vue'
import App from './App.vue'
 
import HelloWorld from '@/components/HelloWorld.js'//引用全局组件Button
 
Vue.use(HelloWorld);//使用全局组件HelloWorld
 
new Vue({
  render: h => h(App),
}).$mount('#app')

4.在页面中使用

<template>
  <div id="app">
    <!-- 使用组件 -->
    <bread-crumb>HelloWorld</bread-crumb>
  </div>
</template>