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>