Vue3 Slot—插槽全家桶使用详解

更新日期: 2022-07-15阅读: 1.2k标签: 插槽

插槽 slot 就是子组件中提供给父组件使用的一个占位符,用 <slot></slot> 表示,父组件可以给这个占位符内填充任何模板代码,填充的内容会自动替换 <slot></slot> 标签。

插槽被分为三种:匿名插槽、具名插槽、作用域插槽。

1、匿名插槽

没有名字的插槽就是匿名插槽,组件可以放置一个或多个 <slot></slot>。

子组件内放置一个插槽:

<template>
    <div>
       <slot></slot>
    </div>
</template>

父组件使用插槽:

<Header>
 <div>哈哈哈哈哈哈</div>
</Header>

// 或
<Header>
 <template v-slot>
  哈哈哈哈哈哈
 </template>
</Header>

如果有多个 slot 时,父组件中需要填充的内容就会被多次插入。

2、具名插槽

组件内可以放置多个插槽,如果都是匿名插槽的时候,渲染的都是父组件默认内容,无法实现插入多个不同内容,此时就需要给插槽设置名字以便于区分它们。

具名插槽就是给插槽取个名字,可以把组件内多个插槽放在不同的地方,父级填充内容时,可以根据名字把内容填充到对应的插槽内。

定义为多个插槽的组件:

<template>
  <div>
    头部:
    <slot name="header"></slot>
    主体:
    <slot></slot>
    底部:
    <slot name="footer"></slot>
  </div>
</template>

父组件填充内容需要对象插槽名:

<Com>
  <template v-slot:header>
    <div>我是header</div>
  </template>
  <template v-slot>
    <div>中间匿名插槽</div>
  </template>
  <template v-slot:footer>
    <div>我是 footer</div>
  </template>
</Com>

可以简写为:

<Com>
  <template #header>
    <div>我是header</div>
  </template>
  <template #default>
      <div>中间匿名插槽</div>
  </template>
  <template #footer>
    <div>我是 footer</div>
  </template>
</Com>

3、作用域插槽

匿名插槽和具名插槽父组件只能访问父组件中编译的内容,子组件只能访问子组件内的内容,有时我们在父组件需要访问到子组件中的内容,此时 vue 给我们提供了作用域插槽。

作用域插槽子组件内定义要传送的数据

<template>
  <div v-for="item in 10" :key="item">
    <slot :data="item" name="list"></slot>
  </div>
</template>

在调用组件的父组件内接收数据:

<SlotCom>
  <template #list="{data}">
    {{ data }}
  </template>
</SlotCom>

4、动态插槽

有多个插槽,不同状态下展示不同的插槽,此时我们就可以使用动态插槽,插槽名是一个变量名,其值可以是动态修改的。

<Dialog>
  <template #[name]>
    <div>
    动态插槽
    </div>
</template>
</Dialog>

我们可以做一个类似于选项卡的效果:

父组件代码:

<button v-for="item in slotList" :key="item.name" @click="changeSlot(item)">
  {{ item.content }}
</button>
<childCom>
  <template #[name]>
    <div>我是{{ name }}插槽</div>
  </template>
</childCom>
<script>
import { reactive, ref } from 'vue'
let name: string = ref('header')

type Slots = {
  name: string
  content: string
}
const slotList = reactive<Slots[]>([
  { name: 'header', content: '头' },
  { name: 'body', content: '中间' },
  { name: 'footer', content: '尾' },
])
const changeSlot = (item: Slots): void => {
  name.value = item.name
}
</script>

子组件代码:

<template>
  <div>
    <slot name="header"></slot>
    <slot name="body"></slot>
    <slot name="footer"></slot>
  </div>
</template>

此时就可以动态地选择其中任意一个插槽展示。

链接: https://fly63.com/article/detial/11898

Vue 技能进阶:使用设计模式写出优雅的前端代码

本文针对 Vue 中如何控制组件子树之外的东西,探讨了四种解决方案,并展示了每种解决方案的优缺点。希望读者能从中受到启发。问你个问题,以前你可能从来没想过:有没有办法从子组件填充父组件插槽?

vue插槽slot和slot-scope

插槽我对他的理解就是父组件的东西插到子组件的<slot></slot>里面,也不知道这样理解对不对,方便自己记忆;作用域插槽我对他的理解就是数据在子组件里面,父组件可以用

一个案例搞懂 Vue.js 的作用域插槽

作用域插槽是 Vue.js 中一个很有用的特性,可以显著提高组件的通用性和可复用性。问题在于,它实在不太好理解。尝试搞清楚父子作用域之间错综复杂的关系,其痛苦程度不亚于求解一个棘手的数学方程。

Vue.js 中的无渲染行为插槽

在本文中我们讨论 Vue 中的无渲染插槽模式能够帮助解决哪些问题。在 Vue.js 2.3.0 中引入的作用域插槽显著提高了组件的可重用性。无渲染组件模式应运而生,解决了提供可重用行为和可插入表示的问题。

vue具名插槽、作用域插槽的新写法

有时让插槽内容能够访问子组件中才有的数据是很有用的。但是由于子组件的作用域在子组件,而父组件的作用域在父组件,这样一来,父组件就访问不到子组件的信息了,但是我们又不想用$emit发送事件去传递信息

深入了解Vue.js的作用域插槽

作用域槽是Vue.js的一个有用特性,它可以使组件更加通用和可重用。唯一的问题是它们很难理解!试着让你的头在父母和孩子的范围内交织,就像解决一个棘手的数学方程。

Vue 2.60 中, 插槽新增的v-slot

注意v-slot只能添加在<template>上(只有一种例外情况),这一点和已经废弃的slotattribute不同。有时让插槽内容能够访问子组件中才有的数据是很有用的。例如,设想一个带有如下模板的<current-user>组件:

如何通过带有Vue插槽的组件传递HTML内容

这篇文章将向您介绍如何使用Vue插槽在Vue.js中将数据从父组件传递到子组件。这篇文章适合所有阶段的开发人员(包括初学者)。

如何使用Vue中的嵌套插槽(包括作用域插槽)

最近我弄清楚了如何递归地实现嵌套插槽,包括如何使用作用域插槽来实现。起因是我想看看是否可以构建一个复制v-for指令但仅使用template组件。

在Vue中,如何从插槽中发出数据

我们知道使用作用域插槽可以将数据传递到插槽中,但是如何从插槽传回来呢?将一个方法传递到我们的插槽中,然后在插槽中调用该方法。 我信无法发出事件

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!