vue 封装组件 全局组件调用

封装的结果就是组件可不引入直接全局调用，类似于element

step1: 创建组件

src/component/test/main.vue

<template>
    <div class = "cont">
        <p class = "title">
            {{title}}
        </p>
        <slot class = "contain" name = "contain"></slot>
    </div>
</template>

<script>
export default {
    name:"test-component",
    props:{
        title:{
            type : String,
            default:"组件标题"
        }
    }
}
</script>

step2：配置

src/component/test/index.js

import main from "./main";
//  main.install = (Vue) => {
//     Vue.component("test-component",main);
//   }

const testComponent = {
  install: function (Vue) {
    Vue.component("testComponent",main);
  }
}

export default testComponent;

step3：main.js引入

import testComponent from "./component/test";
Vue.use(testComponent);

配置结束，调用方法是：

<test-component title = "test">
<div slot = "contine">
  标题标题标题
</div>
</test-component>