在Vue中如何理解插槽Slot

本文介绍了Vue中的slot插槽功能,展示了如何通过匿名插槽和具名插槽进行父子组件间的参数传递,并强调了其在组件复用和模块化设计中的优势。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前几天因为在练习React 所以耽搁了博客的更新
这几天又回顾了Vue的各种属性的用法 我发现一个跟
父子传值差不多的属性 slot 插槽属性
在vue的官方文档中

solt是对组件的扩展,通过slot插槽向组件内部指定位置传递内容,通过slot可以父子传参

可以利用slot属性进行传递
通俗的理解就是
就是在组件模板中使用slot定义一个位置
在通过slot的属性进行匹配
替换组件模板中的位置

我给大家举一个例子

在App.vue 里面引入Slot.vue 子组件

<template>
  <div>
    <router-view />
    <!-- 组件中传递 -->
    <Slot>
      <slot>来自父组件的Hello!word</slot>
    </Slot>
  </div>
</template>
<script>
import Slot from "./components/Slot";
//引入Slot 页面 展示利用插槽slot进行传值
export default {
  components: {
    Slot,
  },
  data() {
    return {};
  },
};
</script>

在Slot.vue中

<template>
  <div>
    <slot></slot>
  </div>
</template>

这是利用匿名插槽来进行传递
在这里插入图片描述

匿名插槽

可以让组件模块化更清晰,同时复用性更高,不至于,我要一杯茶,我就要定义一个组件,我要一杯牛奶我又定义一个组件,有了插槽,我只需要定义一个杯子,要喝什么由使用的传人决定。

上述代码也叫匿名插槽,就是默认把模板全部渲染到solt中,如果需要指定渲染,就需要使用具名插槽,简单说就是起一个名字,告诉他小红该坐那儿,小明该坐那儿

具名插槽

<template>
  <div>
    <router-view />
    <Slot>
        <!-- 组件中传递 -->
      <!-- 替换子组件匿名插槽 -->
      <slot name="title"></slot>
    </Slot>
  </div>
</template>
<script>
import Slot from "./components/Slot";
//引入Slot页面 展示利用插槽slot进行传值
export default {
  components: {
    Slot,
  },
  data() {
    return {};
  },
};
</script>

<template>
  <div>
    <slot name="title">来子组件的Hello!word</slot>
    <!-- 利用具名插槽的name属性来匹配 -->
  </div>
</template>

<script>

</script>

在这里插入图片描述

元素可以用一个特殊的属性 name来配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。

(具名插槽) 组件中有多个命名的slot 插槽时,可以实现父组件对子组件的指定位置显示内容或传参

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值