vue · 插槽 | $slots:访问所有命名插槽内容 | 插槽的使用:子组件和父组件如何书写?

子组件, 插槽的内容是由父组件传递进来的

子组件定义插槽 ------ 组件确定要 插入的位置**------** <slot name="xxx" /> 定位

父组件定义插槽里的内容 ------ 组件确定 内容**------****<template #prefix> 内容**


$slots ------ 访问插槽内容的对象

子组件中访问 $slots,就能知道父组件是否有传入插槽

  • $slots 是 Vue 实例中的一个属性,用于访问所有命名插槽内容

  • 它是一个对象,键是插槽的名字值是对应的 VNode 数组(Vue 虚拟 DOM 节点)。

$slots 类似的还有:
对象 作用说明
$slots 原始插槽内容,是未处理的 VNode。
$scopedSlots (Vue 2) 用于访问作用域插槽(函数)。 Vue 3 中++已废弃++。
slots (Vue 3 中 Composition API) 用于组合式 API 中访问插槽内容。

vue3中

javascript 复制代码
setup(props, { slots }) {
  if (slots.header) {
    const headerVNode = slots.header()
  }
}

注意:

  • $slots 中的 内容VNode 对象数组,不是 HTML 字符串。

  • 不要直接修改 $slots,它是 只读的。

  • 若插槽为 ,对应的 会是 undefined


如何判断是子组件还是父组件?

子组件
  • 定义了 <slot name="xxx" /> 插槽
  • 插槽用于让父组件传入内容,所以 子组件接收内容,属于被插槽注入者 => 子组件
  • 它也使用了 defineProps 和 defineEmits,表明它是一个组件模块,接收 props 和发出事件。
父组件
  • 父组件使用 **<template #prefix>**提供了 名为 prefix 的插槽内容。

  • 在 子组件件内部,插槽 <slot name="prefix" /> 的位置会渲染父组件提供的 内容 <Icon icon="search" />。

  • <template #xxx>...</template>,定义插槽中的具体内容

javascript 复制代码
<!-- 子组件 -->
<slot name="prefix" />
javascript 复制代码
<!-- 父组件中 -->
<VkInput v-model="text">
  <template #prefix>
    <Icon icon="search" />
  </template>
  <template #suffix>
    <span style="color: gray">后缀</span>
  </template>
</VkInput>

例子:

子组件,<slot name="xxx" />,只是占位符,内容由父组件传入

父组件,<template #xxx></template>,定义插槽中的具体内容

问题 答案
插槽的内容是由子组件传过来的吗? 不是,插槽的内容是由父组件传入的。子组件只是定义了插槽的位置父组件传入内容。
相关推荐
我命由我123452 小时前
Kotlin 数据容器 - List(List 概述、创建 List、List 核心特性、List 元素访问、List 遍历)
java·开发语言·jvm·windows·java-ee·kotlin·list
武子康4 小时前
Java-80 深入浅出 RPC Dubbo 动态服务降级:从雪崩防护到配置中心秒级生效
java·分布式·后端·spring·微服务·rpc·dubbo
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴6 小时前
Mix
前端·webgl
代码续发6 小时前
前端组件梳理
前端
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
YuTaoShao7 小时前
【LeetCode 热题 100】131. 分割回文串——回溯
java·算法·leetcode·深度优先
陈不知代码7 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记7 小时前
sass中@mixin与 @include
前端·sass
源码_V_saaskw7 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友