1.使用vue脚手架创建的项目中有一个"components"文件夹,为了规范代码一般我们把控件放在这个文件夹中
2.在控件文件中布局(slot标签是插槽,在引用控件的时候使用template标签添加slot属性)
<template>
<div class="top">
<div class="top_header">
<slot name="top_header">
</slot>
</div>
</div>
<div class="bottom">
<div class="bottom_body">
<slot name="bottom_body"></slot>
</div>
</div>
</template>
3.在使用控件的.vue文件中引用(数字1 2 的内容,相当于放在控件类名为 top_header 和 bottom_body 的div内)
<template>
<Tabel-Comp>
<template slot="top_header">
<-- 1 -->
</template>
<template slot="bottom_header">
<-- 2 -->
</template>
<Tabel-Comp>
</template>
<script>
export default {
components: {
"Tabel-Comp": () => {return import("@/components/Tabel-Comp");
},
}
</script>