详解Vue中使用插槽（slot）、聚类插槽

时间：2021-05-25

一、基本的插槽

这里总结两点

  • 如果不在子组件中使用插槽（slot），那么在子组件中写任何代码都是无效的的，不会显示
  • （插槽默认值）如果子组件中没有插入任何代码的话就会显示组件插槽中的内容

    • slot 代表父组件往子组件中 插入的标签
    这里就代表组件子组件中的

    <p>Dell</p><child><p>Dell</p></child>

    这里如果是这样的

    <child> </child>

    就会显示 <slot>默认内容</slot>中的默认内容

    二、聚类插槽

    1、如果不在子组件中使用插槽（slot），那么在子组件中写任何代码都是无效的的，不会显示

    2、（插槽默认值）如果子组件中没有插入任何代码的话就会显示组件插槽中的内容

    这里如果是这样的

    <child> </child>

    就会显示<slot>默认内容</slot>中的默认内容

    3、聚类插槽

    子组件这么写：

    template:`<div><slot>默认内容</slot><p>content</p><slot>默认内容</slot></div>

    然后这么引用：

    <child> <div>header</div> <div>footer</div></child>

    就会发现结果是

    header
    footer
    content
    header
    footer

    这个不是我的本意，那么怎么办，这里就引入了聚类插槽
    子组件：

    template:`<div><slot name='header'>默认内容</slot><p>content</p><slot name='footer'>默认内容</slot></div>`

    子组件引用：

    <child><div slot='header'>header</div><div slot='footer'>footer</div></child>

    不难发现给每个想要指定的子组件插槽添加 name属性，然后在引用中 slot中明确 是哪个即可也可以理解为引用中是用了两个插槽同时，默认内容同时适用在每个插槽

    三、作用域插槽

    这个是普通插槽的Demo

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vue中使用插槽（slot）</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script></head><body> <div id="root"> <!-- 1、如果不在子组件中使用插槽（slot），那么在子组件中写任何代码都是无效的的，不会显示 2、（插槽默认值）如果子组件中没有插入任何代码的话就会显示组件插槽中的内容 这里如果是这样的 <child> </child> 就会显示 <slot>默认内容</slot>中的 默认内容 --> <child> <p>Dell</p> </child> </div> <script type="text/javascript"> Vue.component('child',{ template:`<div> <slot>默认内容</slot> </div>` }); var vm = new Vue({ el:'#root', }); </script></body></html>

    这个是聚类插槽的Demo

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vue中使用插槽（slot）</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script></head><body> <div id="root"> <!-- 1、如果不在子组件中使用插槽（slot），那么在子组件中写任何代码都是无效的的，不会显示 2、（插槽默认值）如果子组件中没有插入任何代码的话就会显示组件插槽中的内容 这里如果是这样的 <child> </child> 就会显示 <slot>默认内容</slot>中的 默认内容 3、聚类插槽 子组件这么写： template:`<div> <slot>默认内容</slot> <p>content</p> <slot>默认内容</slot> </div>` 然后这么引用： <child> <div>header</div> <div>footer</div> </child> 就会发现结果是 header footer content header footer 这个不是我的本意，那么怎么办，这里就引入了聚类插槽 子组件： template:`<div> <slot name='header'>默认内容</slot> <p>content</p> <slot name='footer'>默认内容</slot> </div>` 子组件引用： <child> <div slot='header'>header</div> <div slot='footer'>footer</div> </child> 不难发现给每个想要指定的子组件插槽添加 name属性， 然后在引用中 slot中明确 是哪个即可 也可以理解为引用中是用了两个插槽 同时，默认内容同时适用在每个插槽 --> <child> <div slot='header'>default header</div> <div slot='footer'>default footer</div> </child> </div> <script type="text/javascript"> Vue.component('child',{ template:`<div> <slot name='header'>默认内容</slot> <p>content</p> <slot name='footer'>默认内容</slot> </div>` }); var vm = new Vue({ el:'#root', }); </script></body></html>

    以上所述是小编给大家介绍的Vue中使用插槽（slot）、聚类插槽详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章