Vue.js的插槽详解：匿名、命名与作用域插槽-优快云博客

本文链接：https://blog.youkuaiyun.com/qitiandada/article/details/105007658

这篇博客介绍了Vue.js中的三种插槽用法：匿名插槽、命名插槽和作用域插槽。通过示例展示了如何在子组件和父组件中使用这些插槽进行内容分发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue中的三种插槽分别为匿名插槽，命名插槽，作用域插槽。

子组件：

<div>
    <li>我是老大</li>
    <slot></slot>
</div>

父组件：子组件挂在在父组件上生成标签

<div>
    <son>
        <li>天天</li>
    </son>
</div>

父组件解译：

<div>
    <li>我是老大</li>
    <li>天天</li>
</div>

子组件;

<div>
    <slot name="dada"></slot>
    <li>我是老大</li>
    <slot name="didi"></slot>
</div>

父组件;子组件挂在父组件上生成标签

<div>
    <son>
        <li solt="dada"> 我是老太</li>
        <li solt="didi">我是老小子</li>
    </son>
</div>

父组件解译：

<div>
    <li>我是老太</li>
    <li>我是老大</li>
    <li>我是老小子</li>
</div>

作用域插槽：
子组件;

<div>
    <slot name="dada" up="上"></slot>
    <li>我是老二</li>
    <solt name="didi" down="下"></solt>
</div>

父组件：子组件挂在父组件上生成标签

<div>
    <son>
        <li solt="dada" slot-scopt="st">{{st.up}}</li>
         <li solt="didi" slot-scopt="st">{{st.down}}</li>
    </son>
</div>

父组件编译：

<div>
    <li>上</li>
    <li>我是老二</li>
    <li>下</li>
</div>