vue-cli中的slot插槽

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

<template>
    <div>
        <h1>插槽测试h1>
        <slot>
            
            
        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>

            
            <p slot="bottom">666p>
        slots>
    div>
template>
<script>
// 引入插槽
import slots from '@/components/slots.vue';
export default {
    data(){
        return{

        }
    },
    components:{
        slots
    }
}
script>