封装的结果就是组件可不引入直接全局调用，类似于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>
