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

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>

如有不足,欢迎指正。

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

 

 


http://www.mrgr.cn/news/38811.html

相关文章:

  • 磁盘管理器
  • python 02 List
  • C#知识|基于反射和接口实现抽象工厂设计模式
  • 四个方法,隐藏word文件中的内容!
  • 零基础学习AI大模型,手把手带你从入门到实践!看过的已经月入6w了!
  • 【Python大语言模型系列】开源机器人对话系统框架RASA介绍与使用(案例分析)
  • 电子相册|智能化电子相册|基于java的电子相册管理系统设计与实现(源码+数据库+文档)
  • 【吊打面试官系列-MySQL面试题】优化MySQL数据库的方法?
  • win10安装Java闪退
  • 我把「国产Sora」接入了「小爱」,邀你免费体验
  • GAMES101(21~22节,动画和仿真)
  • 远程服务器安装anaconda并创建虚拟环境
  • 基于python+spark的外卖餐饮数据分析系统设计与实现(含论文)-Spark毕业设计选题推荐
  • LLM基础概念:RAG
  • 【系统方案】智慧城市大数据平台建设方案(Word)
  • GCC使用入门
  • HAL库I2C通用驱动程序(HAL I2C Generic Driver)
  • H.264编解码工具 - NVIDIA CUDA
  • 余生,闲话少说,闲事少管,闲人少理(深度)
  • 现在转行AI晚不晚,应该怎么做呢?