vue组件之插槽

最新推荐文章于 2024-09-09 17:27:34 发布

heartToSky

最新推荐文章于 2024-09-09 17:27:34 发布

阅读量411

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/heartToSky/article/details/121618376

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue中插槽的使用，包括匿名插槽和具名插槽的概念及应用。匿名插槽用于替换组件内部默认内容，而具名插槽则允许插入多个不同位置的内容，通过name属性进行区分。示例展示了如何在父组件中定义和使用这些插槽，以实现自定义组件结构的功能。

摘要由CSDN通过智能技术生成

slot自定义内容

vue自定义组件时，使用的组件为双标签，但当双标签内部写html内容时却不会显示，只有当定义组件时使用slot标签才会显示

匿名插槽

当组件中slot标签没有name属性时为匿名标签，此时组件内部的html内容会取代组件中slot标签的内容，slot定义时候可以在里面写html内容作为默认html结构

<div id ="app">
        <cpn>
            <h1>我是匿名插槽的标题</h1>
            <p>我是匿名插槽的内容</p>
        </cpn>
    </div>
    <template id="cpn">
        <div>
            <slot></slot>
        </div>
    </template>

在这里插入图片描述
上图为渲染效果
如果有多个匿名插槽会同时改变html结构，所以匿名插槽建议只用一个

具名插槽

在实际开发中会需要改多个插槽的内容，此时需要用具名插槽

<div id ="app">
        <cpn>
            <span slot="left">我是左边</span>    
            <span slot="middle">我是中间</span>
            <span slot="right">我是右边</span>    
        </cpn>
    </div>
    <template id="cpn">
        <div>
            <slot name="left"><span>hello</span></slot>
            <slot name="middle">middle</slot>
            <slot name="right"><span>world</span></slot>
        </div>
    </template>

组件中的slot用name属性，对应cpn中的slot属性,当不使用slot属性的结构不会影响有name属性的插槽