当前位置：首页 > news >正文

vue3 关于插槽的使用

news 来源：原创 2025/6/6 1:22:01

插槽的使用

最近把Vue3 重新复习了一下,发现之前掌握的还不够清楚.所以这里做一下笔记以免忘记,话不多说直接上干货.

关于Vue3的插槽

插槽的使用,用过Vue的人都清楚,就是在需要插入的地方挖个坑,然后你把想要的内容放坑里面,坑就会根据你的内容自动填充 ,但是插槽也是有区别的 :

	-  插槽有好几种 :
		-  匿名插槽
		-  具名插槽
		-  作用域插槽
		-  匿名作用域插槽
		-  具名作用域插槽
		-  条件插槽
		-  动态插槽-暂时还是没弄明白

插槽这么多它到底该怎么使用呢? 这里我以父子组件为例子作为演示

<!-- 父组件 引入子组件-->
<script setup lang="ts" name="Home">
import AboutView from "./AboutView.vue";
</script>
<template>
  <div>
    <AboutView></AboutView>
  </div>
</template>

<!--子组件-->
<template>
  <div class="about">
    <slot>默认内容</slot>
  </div>
</template>

<script lang="ts" setup  name="about"></script>

匿名插槽的使用

上面的例子是一个简单是匿名插槽的例子,当组件标签内没有内容的时候, 就显示 *默认内容* ,当想放入其他内容时只需要,将内容放在子组件标签内即可

<!-- 父组件 引入子组件-->
<script setup lang="ts" name="Home">
import AboutView from "./AboutView.vue";
</script>
<template>
  <div>
    <AboutView>
		<!-- 要展示的内容-->
	</AboutView>
  </div>
</template>

具名插槽的使用

具名插槽与匿名插槽的使用区别,在于插槽 标签多了一个 *name* 属性 ,它的作用是给插槽指定唯一的标识,只有标识一致才会渲染内容,比如下面的列子,只有 v-slot:*aa* 对应的 name 的 *aa* ,内容才会显示
另外补充:
- 具名插槽的摆放位置决定了内容的呈现效果,比如我在父组件 定义了很多个具名插槽,我的顺序是乱的,但是只要你子组件的 name 摆放是有顺序的,那么,你的内容就是有序的
- v-slot:aa 可以简写为 #