Vue 之组件插槽Slot用法(组件间通信一种方式)

1)插槽由来和分类

在某些场景中,我们可能想要在父组件为子组件传递一些模板片段,让子组件在它们的组件中渲染这些片段。

这就是插槽的作用。插槽分多种,默认插槽、具名插槽、条件插槽、动态插槽、作用域插槽。

2)插槽类型和举栗子

1.默认插槽

复制代码
<slot></slot>

举栗子:

父组件:子组件的插槽写在哪里,父组件传递的内容就在哪里展示

复制代码
<template>
  <div>我是父组件</div>
  <son>
    我是父组件给子组件的插槽
  </son>
</template>

<script setup>
import son from './son.vue'
</script>

子组件:

复制代码
<template>
  <h3>我是子组件</h3>
  <br>
  <slot></slot>
</template>

2.具名插槽,一个子组件可以存在多个

复制代码
<slot name="header"></slot>
<slot name="footer"></slot>

父组件:父组件使用具名插槽有2种写法

复制代码
<template>
  <div>我是父组件</div>
  <son>
    我是父组件给子组件的插槽
    <!-- 具名插槽写法1 -->
    <!-- <template v-slot:header>
      header插槽
    </template> -->
    <!-- 具名插槽写法2 -->
    <template #header>
      header插槽
    </template>
  </son>
</template>

子组件:

复制代码
<template>
  <h3>我是子组件</h3>
  <br>
  <slot></slot>
  <br>
  <slot name="header"></slot>
</template>

3.条件插槽,主要是为了给插槽提供额外的样式

复制代码
  <div v-if="slots.header" class="trans-header">
    <slot name="header"></slot>
  </div>
  <div v-if="slots.footer" class="trans-footer">
    <slot name="footer"></slot>
  </div>

举栗子:

父组件:

复制代码
<template>
  <div>我是父组件</div>
  <son>
    <template #header>
      header插槽
    </template>
    <template #footer>
      footer插槽
    </template>
  </son>
</template>

<script setup>
import son from './son.vue'
</script>

子组件:

复制代码
<template>
  <h3>我是子组件</h3>
  <br>
  <slot></slot>
  <br>
  <div v-if="slots.header" class="trans-header">
    <slot name="header"></slot>
  </div>
  <div v-if="slots.footer" class="trans-footer">
    <slot name="footer"></slot>
  </div>
</template>

<script setup>
import { onMounted, useSlots } from "vue";
const slots = useSlots()
onMounted(() => {
  // 可以通过slots判断传递了哪些插槽
  console.log(slots);
})

</script>

4.动态插槽,动态传入插槽名

复制代码
<son>
  <!-- 该属性dynamicSlotName为动态数据,在js定义并传递 -->
  <template v-slot:[dynamicSlotName]>
    ...
  </template>

  <!-- 缩写为 -->
  <template #[dynamicSlotName]>
    ...
  </template>
</son>

5.作用域插槽

父组件:父组件传递给子组件的数据,可以通过插槽再次传递给父组件使用,封装组件时非常常用

复制代码
<template>
  <div>我是父组件</div>
  <son :obj1="obj1" :obj2="obj2">
    我是父组件给子组件的插槽
    <template #header="slot">
      header插槽{{ slot.obj1 }}
    </template>
    <template #footer="slot">
      footer插槽{{ slot.obj2 }}
    </template>
  </son>
</template>

<script setup>
import { reactive } from 'vue';
import son from './son.vue'
const obj1 = reactive({ name: '羊羊', age: 12 });
const obj2 = reactive({ name: '猫猫', age: 2 });
</script>

子组件:

复制代码
<template>
  <h3>我是子组件</h3>
  <br>
  <slot></slot>
  <br>
  <slot name="header" :obj1="obj1"></slot>
  <slot name="footer" :obj2="obj2"></slot>
</template>

<script setup>
const props = defineProps({
  obj1: {
    type: Object, default: () => { }
  },
  obj2: {
    type: Object, default: () => { }
  },
})
</script>

如有不足,欢迎指正。

不要忽视你达成的每个小练习,它是你前进路上的垫脚石。冲!

相关推荐
小墨宝33 分钟前
js 生成pdf 并上传文件
前端·javascript·pdf
HED1 小时前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能
DN金猿1 小时前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子1 小时前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远661 小时前
Kotlin 的 suspend 关键字
前端
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
YuShiYue2 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
天天扭码2 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛2 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
vvilkim2 小时前
React 与 Vue:两大前端框架的深度对比
vue.js·react.js·前端框架