Vue笔记（三）：Components—slot

最新推荐文章于 2024-09-13 09:42:12 发布

weixin_30883777

最新推荐文章于 2024-09-13 09:42:12 发布

阅读量257

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/qimeng/p/7704264.html

本文详细介绍了Vue.js中内容分发的概念与实现方法，包括单个插槽、具名插槽及作用域插槽的应用场景与配置方式，并探讨了如何通过插槽使组件更加灵活与可复用。

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

Solt - 内容分发

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

组件的作用域相互独立，子组件中定义的数据只能在子组件模板内使用，父组件也如此。如果子组件想要使用父组件的数据，需要子组件定义 props 属性来实现。

为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板，这个过程被称为内容分发。Vue.js 使用 <slot> 元素作为内容插槽。

1. 单个插槽

<slot> 标签中的内容为备用内容，仅在 <my-component> 标签内容为空时显示。
<my-component> 标签内如果有其他内容，则替换 <slot> 标签显示其内容。
如果组件模板内无 <slot> 插槽，那么 <my-component> 标签中内容将会被丢弃。

<!-- my-component组件模板 -->
<template>
    <div>
        <h3>component-1</h3>
        <slot>
            <p>备用内容</p>
        </slot>
        <h3>component-2</h3>
    </div>
</template>

<!-- 父组件 -->
<my-component></my-component>

2. 具名插槽

用 name 属性来配置如何分发内容，并匹配内容片段中有对应 slot 特性的元素。
匿名插槽作为找不到匹配的内容片段的备用插槽。

<template>
    <div class="container">
        <header>
            <slot name="header"></slot>
        </header>
        <slot></slot>
        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>
</template>

<my-layout>
    <h1 slot="header">This is a header</h1>
    <p>nameless</p>
    <h1 slot="footer">This is a footer</h1>
</my-layout>

渲染结果：

<div class="container">
    <header>
        <h1 slot="header">This is a header</h1>
    </header>
    <p>nameless</p>
    <footer>
        <h1 slot="footer">This is a footer</h1>
    </footer>
</div>

3. 作用域插槽

作用域插槽与 props 具有类似功能，可用于父子组件的数据传递。

在父级中，具有特殊特性 scope 的 <template> 元素必须存在，表示它是作用域插槽的模板。scope 的值对应一个临时变量名，此变量接收从子组件中传递的 props 对象：

<!-- 子组件模板 -->
<div>
    <slot txt="Hello World!" ></slot>
</div>

<my-component>
    <template scope="prop">
        <p>{{prop.txt}}</p>
    </template>
</my-component>

渲染结果：