vue-cli中的slot插槽

在项目根目录/components目录中定义带有插槽的组件
插槽部分用slot标签标示

<template>
    <div>
        <h1>插槽测试</h1>
        <slot>
            <!-- 引用此slot的地方，在slot标签内自定义的内容，将会自动被添加到此插槽内 -->
            <!-- 相当于在这里预留了一个DOM位置 -->
        </slot>
        <p>我是底部</p>
        <slot name="bottom"></slot>
    </div>
</template>

在页面中引入带有插槽的组件

// 引入插槽组件
import slots from '@/components/slots.vue';

<template>
    <div>
        <h1>Slot插槽</h1>
        <div>--------------------</div>
        <slots>
            <h2>用户往插槽内添加的内容</h2>

            <!-- 将DOM放入指定的插槽中，用name表示 -->
            <p slot="bottom">666</p>
        </slots>
    </div>
</template>
<script>
// 引入插槽
import slots from '@/components/slots.vue';
export default {
    data(){
        return{

        }
    },
    components:{
        slots
    }
}
</script>