Vue3插槽
前言
slot元素是一个插槽出口 (slot outlet),标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。
一、Vue3插槽
如果父组件引入子组件,并且想在子组件中展示添加内容,这时就可以使用插槽技术
1.匿名插槽
匿名插槽就是没有名字的插槽
代码如下(示例):
// 父组件
<template>
<div>
//引入子组件
<Child>
我是需要子组件展示的内容
</Child>
</div>
</template>
// 子组件
<template>
<div>
//添加插槽使父组件写入的内容展示
<slot></slot>
</div>
</template>
2.具名插槽
就是有名字的插槽,父组件写入内容的名字,和子组件slot插槽的名字,对应才会展示。
// 父组件
<template>
<div>
//引入子组件
<Child>
<template v-slot:aaa>
我是需要子组件展示的内容1
</template>
<template v-slot:bbb>
我是需要子组件展示的内容2
</template>
</Child>
</div>
</template>
// 子组件
<template>
<div>
//添加插槽使父组件写入的内容展示
<slot name="aaa"></slot>
<slot name="bbb"></slot>
</div>
</template>
此时父组件的aaa对应子组件slot的名字aaa,这时对应的内容就会展示在子组件插槽aaa中,bbb同理。
注意:v-slot:aaa有简写
// 父组件
<template>
<div>
//引入子组件
<Child>
<template #aaa>
我是需要子组件展示的内容1
</template>
<template #bbb>
我是需要子组件展示的内容2
</template>
</Child>
</div>
</template>
// 子组件
<template>
<div>
//添加插槽使父组件写入的内容展示
<slot name="aaa"></slot>
<slot name="bbb"></slot>
</div>
</template>
3.作用域插槽
然而在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。要做到这一点,我们需要一种方法来让子组件在渲染时将一部分数据提供给插槽。
我们也确实有办法这么做!可以像对组件传递 props 那样,向一个插槽的出口上传递 attributes
// 父组件
<template>
<div>
//引入子组件
<Child>
<template v-slot="{data}">
//可以展示子组件传过来的值
{{data.name}}
</template>
</Child>
</div>
</template>
// 子组件
<template>
<div>
//添加插槽使父组件写入的内容展示
<div v-for="item in arr" :key="item.id">
//传入一个属性,父组件可以接受并渲染出来
<slot :data="item"></slot>
</div>
</div>
</template>
<script setup>
let arr = ref([
{
name:"aaa",
age:1,
id:1
},
{
name:"bbb",
age:114,
id:2
},
{
name:"ccc",
age:6,
id:3
}
])
</script>
作用域插槽也有简写v-slot=“{data}”,可以写为#default=“{data}”
4.动态插槽
根据状态的值动态改变的插槽
代码如下(示例):
// 父组件
<template>
<div>
//引入子组件
<Child>
//[str]即为状态str的值
<template v-slot:[str]>
我是需要子组件展示的内容1
</template>
</Child>
</div>
</template>
<script setup>
let srt = ref("ccc")
</script>
// 子组件
<template>
<div>
//添加插槽使父组件写入的内容展示
<slot name="ccc"></slot>
</div>
</template>
这个也有简写v-slot:[str], 可以简写为#[str]
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgcjekb
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01