首页 > 其他分享 >Vue3:具名插槽

Vue3:具名插槽

时间:2024-09-10 09:25:00浏览次数:9  
标签:插槽 具名 Here 内容 Vue3 组件 slots

有时在一个组件中包含多个插槽出口是很有用的。举例来说,在一个 <BaseLayout> 组件中,有如下模板:

<div class="container">
  <header>
    <!-- 标题内容放这里 -->
  </header>
  <main>
    <!-- 主要内容放这里 -->
  </main>
  <footer>
    <!-- 底部内容放这里 -->
  </footer>
</div>

对于这种场景,<slot> 元素可以有一个特殊的 attribute name,用来给各个插槽分配唯一的 ID,以确定每一处要渲染的内容:

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

这类带 name 的插槽被称为具名插槽 (named slots)。没有提供 name 的 <slot> 出口会隐式地命名为“default”。

在父组件中使用 <BaseLayout> 时,我们需要一种方式将多个插槽内容传入到各自目标插槽的出口。此时就需要用到具名插槽了:

要为具名插槽传入内容,我们需要使用一个含 v-slot 指令的 <template> 元素,并将目标插槽的名字传给该指令:

<BaseLayout>
  <template v-slot:header>
    <!-- header 插槽的内容放这里 -->
  </template>
</BaseLayout>

v-slot 有对应的简写 #,因此 <template v-slot:header> 可以简写为 <template #header>。其意思就是“将这部分模板片段传入子组件的 header 插槽中”。

下面我们给出完整的、向 <BaseLayout> 传递插槽内容的代码,指令均使用的是缩写形式:

<BaseLayout>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>

  <template #default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>

  <template #footer>
    <p>Here's some contact info</p>
  </template>
</BaseLayout>

当一个组件同时接收默认插槽和具名插槽时,所有位于顶级的非 <template> 节点都被隐式地视为默认插槽的内容。所以上面也可以写成:

<BaseLayout>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>

  <!-- 隐式的默认插槽 -->
  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template #footer>
    <p>Here's some contact info</p>
  </template>
</BaseLayout>

现在 <template> 元素中的所有内容都将被传递到相应的插槽。最终渲染出的 HTML 如下:

<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </header>
  <main>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </main>
  <footer>
    <p>Here's some contact info</p>
  </footer>
</div>

使用 JavaScript 函数来类比可能更有助于你来理解具名插槽:

// 传入不同的内容给不同名字的插槽
BaseLayout({
  header: `...`,
  default: `...`,
  footer: `...`
})

// <BaseLayout> 渲染插槽内容到对应位置
function BaseLayout(slots) {
  return `<div class="container">
      <header>${slots.header}</header>
      <main>${slots.default}</main>
      <footer>${slots.footer}</footer>
    </div>`
}

标签:插槽,具名,Here,内容,Vue3,组件,slots
From: https://blog.csdn.net/weixin_73060959/article/details/142083998

相关文章

  • 在vue3中手写按需加载图片
    在我们的网页中.假如使用了大量的图片,每个图片都是需要去访问加载的这就影响了我们的访问速度,手写一个按需加载组件,就可以解决这个问题让图片处于页面视图的时候再加载,减轻网页访问负担利用vue3官网给出的钩子我们常用的就是onMountent如官网所示为了及时监测,这里......
  • vue3生命周期(钩子函数)
    在Vue3中,生命周期钩子被重命名并分为了不同的阶段,以更好地描述它们的用途。这些新的生命周期钩子包括:setup():这是一个新的入口点,在beforeCreate和created之前调用。onBeforeMount/onMounted:组件挂载前/后的生命周期钩子。onBeforeUpdate/onUpdated:组件更新前/后的生命......
  • Vue2 和 Vue3 的区别(设计理念、性能提升、编码方式以及特性)
    Vue2和Vue3是Vue.js框架的两个主要版本,虽然它们具有许多相似之处,但也有一些重要的区别。下面是Vue2和Vue3之间的一些区别:设计理念:Vue2采用的是基于对象的设计理念,通过使用OptionsAPI来组织组件的相关选项(data、methods、computed、watch等)。Vue3采用的是基于函数的设计理念......
  • Vue3使用icon组件不生效的问题()
    首先确保项目中已经安装了ant-design-vue:npminstallant-design-vue@next--save#注意使用@next来安装Vue3兼容的版本#或者yarnaddant-design-vue@next在Vue组件中引入并使用图标:(单独导入)<template><divclass="overlay-table-close-btn"@click="toggle......
  • vue3+el-upload上传文件
    <template><el-uploadclass="avatar-uploader"action="#":headers="headers":http-request="uploadAction":on-change="onchange":file-list="fi......
  • Vue3、Vue2、js通用下载不同文件的几种方式
    示例在Vue中需要实现文件下载功能时,我们可以有多种方式来完成。下面将介绍五种常用的方法。1.使用window.open方法下载文件<template><div><button@click="downloadFile('file1.pdf')">下载文件1</button><button@click="downloadFile('file2.jpg'......
  • Vue3学习汇总(路由篇)
    1.单一页面设计常用存在导航栏和内容区,导航栏路由分配,内容区呈现组件内容;<template><divclass="app"><h2class="title">vue路由测试</h2><!--导航区--><divclass="navigate"><RouterLinkto="/h......
  • 组态软件之万维组态介绍(web组态、html组态、vue2/vue3组态、组态软件、组态编辑器)
     一、什么是组态软件组态软件是一种用于创建、配置和管理监控和控制系统的软件工具。组态是指不需要编写计算机程序、通过配置的方式完成工业应用开发的系统。它们通常用于工业自动化领域,用于实时监视和控制工业过程。组态软件提供了丰富的功能和工具,使用户能够创建用户界......
  • Vue3:<Teleport>传送门组件的使用和注意事项
    你好,我是沐爸,欢迎点赞、收藏、评论和关注。Vue3引入了一个新的内置组件<Teleport>,它允许你将子组件树渲染到DOM中的另一个位置,而不是在父组件的模板中直接渲染。这对于需要跳出当前组件的DOM层级结构进行渲染的场景非常有用,比如模态框(Modal)、下拉菜单(Dropdown)或者工......
  • VUE框架基于Vite的Vue3搭建项目的脚手架------VUE框架
    data:redis:lettuce:cluster:refresh:adaptive:trueperiod:2000pool:max-idle:8min-idle:0max-wait:-1msmax-active:8password:abc123......