跟小满老师学vue3 第十七章插槽

最新推荐文章于 2024-04-22 15:43:58 发布

molicong83

最新推荐文章于 2024-04-22 15:43:58 发布

阅读量286

点赞数

分类专栏： vue3 文章标签： vue.js 前端 typescript

本文链接：https://blog.csdn.net/molicong83/article/details/130433445

版权

本文介绍了Vue3中的插槽概念，包括它们是什么，基础用法，具名插槽以及作用域插槽的详细解释。通过示例代码展示了如何声明和使用插槽，如具名插槽的自定义内容和作用域插槽的数据解构。对于前端开发者深入理解Vue组件封装和交互具有指导意义。

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

1.插槽是什么？

插槽（slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分内容定义为插槽。

可以把插槽认为是组件封装期间，为用户预留的内容的占位符。

2.插槽的基础用法

使用<slot>声明一个插槽，<slot>默认需要填写name属性，如果没有填写name，则默认name为default，自定义的内容用<template>标签包裹，<template>不会渲染到页面上，只有包裹作用。

代码示例：

<A>
  <template>
    <div>
      我是用户自定义的内容，我会在A组件插槽展示
    </div>
  </template>
</A>

<template>
  <header>我是头部</header>
  <main>
    <!-- slot 用户预定义内容的占位符 -->
    <!-- A组件使用时，用户自定义的内容会在这里展示 -->
    <slot>我先占个位</slot>
  </main>
  <footer>我是底部</footer>
</template>

2.1没有插槽的预定义内容会丢弃

如果在封装组件时没有预留任何 <slot> 插槽，则用户提供的任何自定义内容都会被丢弃。代码示例：

<A>
  <template>
    <div>
      我是用户自定义的内容，但我没有找到插槽插入
    </div>
  </template>
</A>

<template>
  <header>我是头部</header>
  <main>
    <!-- slot 用户预定义内容的占位符 -->
    <!-- A组件使用时，用户自定义的内容会在这里展示 -->
    <!-- <slot>我先占个位</slot> -->
  </main>
  <footer>我是底部</footer>
</template>