具名插槽

插槽：vue内容分发的机制，只能用在组件当中的 结合v-solt（出口）使用  <solt></slot>其实就是占位的作用 来接收html中组件标签里面的内容 最终页面渲染的是组件的template里的内容

 

 

具名插槽 ： v-solt标签只能用于template标签中

在 <slot> 标签 添加 name属性指定 插槽名 , <slot name='自定义的插槽名'></slot>

                在组件模板中可以添加多个插槽 , 使用具名插槽，通过 指定插槽名进行区分

                语法格式：

                    <组件标签名>

                        <template v-slot:自定义插槽名>

                            .... 写入 内容(字符串， html, 组件 ...)

                        </template>

                    </组件标签名>  

<div id="app">
        <!-- 1  组件标签内写入内容 -->
        <!-- <first-child>hello world</first-child> -->

        <!--  默认是添加到 默认插槽 -->
        <!-- <first-child>
            <p>hello world ==== {{msg}}</p>
            <ul>
                <li>xiangmu</li>
                <li>xiangmu</li>
                <li>xiangmu</li>
                <li>xiangmu</li>
            </ul>
            <h1>内容</h1>
        </first-child> -->


        <!-- =============== 具名插槽   需要结合v-slot 指令指定插槽名, v-slot 指令只能 用于 <template> 标签上  ; 页面渲染的结构 由组件模板决定， 而不是添加插槽内容的顺序  -->

        <first-child>
            <!--  凡是没有指定具体的插槽名的内容 将被放到默认插槽中-->
            <h1>也将会添加到默认插槽</h1>

            <!-- 在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：  -->
            <template v-slot:slide>
                 <p >hello world </p>
            </template>

            <template v-slot:content>
                <second-child></second-child>
            </template>

            <!--   -->
            <em>没有使用 template 标签包裹 </em>          

        </first-child>

        <first-child>
            <!--  这两种方式都是往默认插槽分发内容，但是不能同时使用， 二选一，  -->
            
            <!-- 指定默认插槽   默认插槽名是 default -->
            <template v-slot:default>
                <strong>这个内容 ？？？？</strong>
            </template>

            <!--  默认使用 默认插槽 -->
            <!-- <p>默认插槽==============</p> -->

        </first-child>
    </div>

<script src="./js/vue.global.min.js"></script>
    <script>
        const app = Vue.createApp({
            data(){
                return{
                    msg:'hello vue3'
                }
            }
        })

        const FirstChild = {
            template:`
                <div>
                    <p>默认的结构</p>
                    <div class='wrap'>
                        <div class='nav'>
                            <slot></slot> 
                        </div>   
                        <div class='slide'>
                            侧边栏:
                            <slot name='slide'></slot> 
                        </div>   
                        <div class='body'>
                            <slot name='content'> </slot> 
                        </div>   
                    </div>
                </div>
            `
        }

        const SecondChild = {
            template:`
                <div>
                    组件作为插槽内容
                </div>
            `
        }


        app.component('FirstChild', FirstChild)
        app.component('SecondChild', SecondChild)

        app.mount('#app')
    </script>