Vue项目添加自定义控件

标签：imp   文件夹   header   自定义控件   head   return   定义   控件   component   

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>

Vue项目添加自定义控件

标签：imp   文件夹   header   自定义控件   head   return   定义   控件   component   

原文地址：https://www.cnblogs.com/yonglan/p/14161572.html