vue组件---插槽

（1）插槽内容

Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。

在父级组件里可以这样写

    <div class="slot_area">

        <navigation-link v-bind:url="url">

            Your Profile你的个人简介资料

        </navigation-link>

    </div>

然后在 <navigation-link> 组件模板中：

        Vue.component('navigation-link',{

            props:['url'],

            template:`<a v-bind:href="url" class="nav-link">

                        <span class="slot_span"></span>

                        <slot></slot>

                    </a>`

        });

new Vue({
el:'.slot_area',
data:{
url:'http://www.baidu.com'
}
})

当组件渲染的时候，<slot></slot> 将会被替换为“Your Profile你的个人简介资料”。

插槽内可以包含任何模板代码，包括 HTML：

        Vue.component('navigation-link',{

            props:['url'],

            template:`<a v-bind:href="url" class="nav-link">
                        <!-- 添加一个 Font Awesome 图标 -->

                        <span class="fa fa-user"></span>

                        <slot></slot>

                    </a>`

        });

插槽也可以是其他组件

    <div class="slot_area">

        <navigation-link v-bind:url="url">

            Your Profile你的个人资料简介

            <slot-component></slot-component>

        </navigation-link>

    </div>

    <script type="text/javascript">

        Vue.component('navigation-link',{

            props:['url'],

            template:`<a v-bind:href="url" class="nav-link">

                        <!-- 添加一个 Font Awesome 图标 -->

                        <span class="slot_span"></span>

                        <slot></slot>

                    </a>`

        });

        Vue.component('slot-component',{

            template:'<h4>插槽可以是其他模板</h4>'

        })

        new Vue({

            el:'.slot_area',

            data:{

                url:'http://www.baidu.com'

            }

        })

    </script>

结果：

注意：如果 <navigation-link> 没有包含一个 <slot> 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。即如果模板中没有slot插槽元素，则在父级组件里加的内容都会被抛弃。

（2）编译作用域

父组件模板内容是在父组件作用域中编译的，子组件模板内容是在子组件里编译的。

先来个简单的案例：

<parent-scrop>
    {{message}}
</parent-scrop>

Vue.component('parent-scrop',{

    template:`<div>

                子组件模板内容

                <slot></slot>

            </div>`

});

new Vue({

    el:".parent_scrop",

    data:{

        message:"父组件模板内容"

    }

});

这里的message就是一个slot，但是其绑定的是父组件的数据，而不是子组件模板的数据。

再来看个案例：

    <div class="parent_scrop">

        <parent-scrop v-show="showStatus"></parent-scrop>

    </div>

    Vue.component('parent-scrop',{

        template:`<div>

                    子组件模板内容

                </div>`

    });

    new Vue({

        el:".parent_scrop",

        data:{

            showStatus:true

        }

    })

这里的showStatus绑定的是父级组件的数据，如果想在子级组件上绑定，应该是

    <div class="parent_scrop">

        <parent-scrop></parent-scrop>

    </div>

    Vue.component('parent-scrop',{

        template:`<div v-show="showStatus">

                    子组件模板内容

                </div>`,

        data:function(){

            return {

                showStatus:false

            }

        }

    });

    new Vue({

        el:".parent_scrop"

    })

结果：

因此，slot分发的内容，作用域是在父组件上的。

（3）slot用法

①单个slot

在子组件内使用特殊的<slot>元素就可以为这个子组件开启一个slot（插槽），在父组件模板里，插入在父组件标签内的所有内容都将替代子组件的<slot>标签及它的内容。

demo1：

    <div class="single_slot">

        <single-slot></single-slot>

    </div>

        Vue.component('single-slot',{

            template:`

                    <div>

                        <slot>

                            <p>如果父组件没有插入内容，将会作为默认值出现</p>

                        </slot>

                    </div>

            `

        });

        new Vue({

            el:".single_slot"

        })

结果：

demo2：父组件插入内容

    <div class="single_slot">

        <single-slot>

            <p>父组件插入内容</p>

            <p>分发更多内容</p>

        </single-slot>

    </div>

        Vue.component('single-slot',{

            template:`

                    <div>

                        <slot>

                            <p>如果父组件没有插入内容，将会作为默认值出现</p>

                        </slot>

                    </div>

            `

        });

        new Vue({

            el:".single_slot"

        })

结果：

（4）后备内容/备用内容

结合上例，<single-slot>模板里定义了<slot>元素，并用了<p>作为默认内容。在父组件没有使用slot即未插入内容时，会渲染这段默认文本；如果写入了slot，那么就会替换整个<slot>。

注意：子组件<slot>中的后备内容，其作用域是子组件本身。

（5）具名插槽

给<slot>元素指定一个name后，可以分发多个内容，具名插槽可以与单个插槽共存。

用法简单demo1：

父级组件里：

<solt-area>

    <h2 slot="header">标题</h2>

    <p slot="footer">底部</p>

</slot-area>

子级模板里：

Vue.component('slot-area',{

    template:`

            <div class="main_area">

                    <div class="header"><slot name="header"></slot></div>

                    <div class="footer"><slot name="footer"></slot></div>

            </div>

          `

})

demo2：

    <!-- 具名slot -->

    <div class="slot_name">

        <slot-name>

            <h2 slot="header">文章标题</h2>

            <p>内容展示区域1，文章具体内容1... ...</p>

            <p>内容展示区域2，文章具体内容2... ...</p>

            <p slot="footer">作者：Tony 发布日期：2020.6.</p>

        </slot-name>

    </div>

    <style type="text/css">

        .main_area{

            padding: 20px;

            background-color: rgba(,,,0.1);

        }

        .main_area h2{

            margin: 10px ;

            text-align: center;

        }

        .main_area .footer{

            text-align: right;

            font-weight: ;

            margin: 10px ;

        }

        .main_area .main{

            padding: 10px;

            background-color: rgba(,,,.);

        }

    </style>

        /* 3、具名slot */

        Vue.component('slot-name',{

            template:`

                <div class="main_area">

                    <div class="header"><slot name="header"></slot></div>

                    <div class="main"><slot></slot></div>

                    <div class="footer"><slot name="footer"></slot></div>

                </div>

            `

        })

        new Vue({

            el:".slot_name"

        })

结果：

子组件里声明了3个<slot>元素，其中在<div class="main"></div>内的slot没有使用name特性，所以他将作为默认slot出现，父组件里没有使用slot特性的元素与内容都将出现在这里。

如果没有指定默认的匿名slot，父组件里多余的内容片段都将会被抛弃。在组合使用组件时，内容分发API至关重要。

注意：自2.6.0开始有所跟新，将原先的slot方法更新为v-slot 指令即

    <div class="slot_name">

        <slot-name>

            <template v-slot:header>

                <h2>文章标题</h2>

            </template>

            <template v-slot:default>

                <p>内容展示区域1，文章具体内容1... ...</p>

                <p>内容展示区域2，文章具体内容2... ...</p>

            </template>

            <template v-slot:footer>

                <p>作者：Tony 发布日期：2020.6.8</p>

            </template>

        </slot-name>

    </div>

现在 <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。然而，如果你希望更明确一些，仍然可以在一个 <template> 中包裹默认插槽的内容，如上所示v-slot:default。

（6）作用域插槽

正常情况下，父级组件的插槽内容无法访问子级模板中的数据，例如

    <div class="scrop_slot">

        <scrop-slot>

            姓：{{user.firstName}}，名：{{user.lastName}}

        </scrop-slot>

    </div>

        /* 4、作用域插槽 */

        Vue.component('scrop-slot',{

            template:`

                    <div class="show_area">

                        <slot>

                            <p>姓：{{user.firstName}}，名：{{user.lastName}}</p>

                        </slot>

                    </div>

                    `,

            data:function(){

                return {

                    user:{firstName:"邓",lastName:"超"}

                };

            }

        })

        new Vue({

            el:".scrop_slot"

        })

        /* 4、作用域插槽 */

此时，控制台会出现报错提示

为了让 user 在父级的插槽内容可用，我们可以将 user 作为一个 <slot> 元素的特性绑定上去：

<slot v-bind:user="user">

        <p>姓：{{user.firstName}}，名：{{user.lastName}}</p>

</slot>

绑定在 <slot> 元素上的特性被称为插槽 prop。现在在父级作用域中，我们可以给 v-slot 带一个值来定义我们提供的插槽 prop 的名字：

    <div class="scrop_slot">

        <scrop-slot v-slot:default="slotDefault">

            <template>

                姓：{{slotDefault.user.firstName}}，名：{{slotDefault.user.lastName}}

            </template>

        </scrop-slot>

    </div>

在这个例子中，选择将包含所有插槽 prop 的对象命名为 slotProps，也可以使用任意你喜欢的名字。

（7）独占默认插槽的缩写语法

    <div class="scrop_slot">

        <scrop-slot v-slot:default="slotDefault">

            <template>

                姓：{{slotDefault.user.firstName}}，名：{{slotDefault.user.lastName}}

            </template>

        </scrop-slot>

    </div>

在上述情况下，当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上：

    <div class="scrop_slot">

        <scrop-slot v-slot:default="slotDefault">

            姓：{{slotDefault.user.firstName}}，名：{{slotDefault.user.lastName}}

        </scrop-slot>

    </div>

这种写法还可以更简单。就像假定未指明的内容对应默认插槽一样，不带参数但 v-slot 被假定对应默认插槽：

    <div class="scrop_slot">

        <scrop-slot v-slot="slotDefault">

            姓：{{slotDefault.user.firstName}}，名：{{slotDefault.user.lastName}}

        </scrop-slot>

    </div>

注意：注意默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确。如下所示

<scrop-slot v-slot="slotDefault">

     姓：{{slotDefault.user.firstName}}

     <template v-slot:other="otherSlot">

          名：{{slotDefault.user.lastName}}

     </template>

</scrop-slot>

此时，控制台出现报错：译为---为避免范围模糊，当存在其他命名槽时，默认槽也应使用<template>语法。

<scrop-slot>

    <template v-slot:datault="slotDefault">

        姓：{{slotDefault.user.firstName}}

    </template>

    <template v-slot:other="otherSlot">

        名：{{otherSlot.user.lastName}}

    </template>

</scrop-slot>

只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法。

（8）解构插槽Prop

可以使用 ES2015 解构来传入具体的插槽 prop，如下：

    <div class="scrop_slot">

        <scrop-slot v-slot="{user}">

            {{user.firstName}}

        </scrop-slot>

    </div>

        Vue.component('scrop-slot',{

            template:`

                    <div class="show_area">

                        <slot v-bind:user="user">

                            <p>姓：{{user.firstName}}，名：{{user.lastName}}</p>

                        </slot>

                    </div>

                    `,

            data:function(){

                return {

                    user:{firstName:"邓",lastName:"超"}

                };

            }

        })

        new Vue({

            el:".scrop_slot"

        })

这样可以使模板更简洁，尤其是在该插槽提供了多个 prop 的时候。它同样开启了 prop 重命名等其它可能，例如将 user 重命名为 person：

<scrop-slot v-slot="{user:person}">

    {{person.firstName}}

</scrop-slot>

（9）动态插槽名（待验证）

（10）具名插槽缩写

跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：

    <div class="slot_name">

        <slot-name>

            <template #header>

                <h2>文章标题</h2>

            </template>

            <template #default>

                <p>内容展示区域1，文章具体内容1... ...</p>

                <p>内容展示区域2，文章具体内容2... ...</p>

            </template>

            <template #footer>

                <p>作者：Tony 发布日期：2020.6.</p>

            </template>

        </slot-name>

    </div>

巴特西

vue组件---插槽

最新文章

热门文章