山西省建设厅官网站上海网站推广广告

插槽的使用

最近把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 可以简写为 #