Vue中的匿名插槽与具名插槽详解

<div id="app">
 
    </div>
 
    <script src="./js/vue.js"></script>
    <script>
 
        // 根组件（父组件，又叫基组件）
        let vm = new Vue({
            el:'#app',
        })
    </script>

 // 申明局部组件
        let child = {
            template:`
            <div>
                <p>我是子组件</p>
                <p>我是一行话</p>
                <slot>这是占位的内容</slot>
            </div>
            `
        }

  // 根组件（父组件，又叫基组件）
        let vm = new Vue({
            el:'#app',
 
            // 子组件们(注册中心)
            components:{
                // 键值对，当键和值相同可以省略
                child
            }
        })

<div id="app">
 
        <!-- 使用组件 -->
        <child></child>
    </div>

 <!-- 使用组件 -->
        <child>
            <h1 style="color: aqua;">这是一个内容</h1>
        </child>

 template:`
            <div>
                <p>我是子组件</p>
                <p>我是一行话</p>
                <slot>这是占位的内容</slot>
                <slot></slot>
                <slot></slot>
            </div>
            `

<child>
            <h1 style="color: aqua;">这是第一个内容</h1>
            <h1 style="color: red;">这第二个内容</h1>
        </child>

 template:`
            <div>
                <p>我是子组件</p>
                <p>我是一行话</p>
                <slot name="default">这是占位的内容</slot>
                <slot name="t1">这是t1占位的内容</slot>
                <slot name="t2">这是t2占位的内容</slot>
                <slot name="t3">这是t3占位的内容</slot>
                <slot name="t5">这是t4占位的内容</slot>
            </div>
            `,

 <child>
            <!-- 此时这两句话还是放在匿名插槽中 -->
            <h1 style="color: aqua;">这是第一个内容</h1>
            <h1 style="color: red;">这第二个内容</h1>
 
                <!-- slot="t1"  指定把内容放在那个插槽里 -->
            <h2 style="color: blue;" slot="t1">我要放在具名插槽t1里使用</h2>
            <h3 style="color: green;" slot="t2">我要放在具名插槽t2里使用</h3>
            <h4 style="color: orange;" slot="t3">我要放在具名插槽t3里使用</h4>
            <h5 style="color: pink;" slot="t4">我要放在具名插槽t4里使用</h5>
        </child>