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>