Vue3中Slot用法
原创Vue3中Slot用法
原创
软件工程师Michael
发布于 2022-10-05 20:13:24
发布于 2022-10-05 20:13:24
插槽基本使用
插槽的用途就和它的名字一样：有一个缺槽，我们可以插入一些东西。
插槽 slot 通常用于两个父子组件之间，最常见的应用就是我们使用一些 UI 组件库中的弹窗组件时，弹窗组件的内容是可以让我们自定义的，这就是使用了插槽的原理。
我们在项目中新建一个 child.vue 文件，用来当作子组件，它的代码也非常的简单。
<template>
<div class="child-box">
<p>我是子组件</p>
<!-- 插槽 -->
<slot></slot>
</div>
</template>
<style>
.child-box {
display: flex;
flex-direction: column;
align-items: center;
}
</style>然后我们直接在 App.vue 引用该子组件，代码如下：
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<child></child>
</template>
<script setup lang="ts">
import Child from "./child.vue";
</script>为了更好理解插槽，简单总结为以下几点：
- slot 是 Vue3 中的内置标签。
- slot 相当于给子组件挖出了一个槽，可以用来填充内容。
- 父组件中调用子组件时，子组件标签之间的内容元素就是要放置的内容，它会把 slot 标签替换掉。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录