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>,定义插槽中的具体内容

问题 答案
插槽的内容是由子组件传过来的吗? 不是,插槽的内容是由父组件传入的。子组件只是定义了插槽的位置父组件传入内容。
相关推荐
万少23 分钟前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
蓝澈112125 分钟前
迪杰斯特拉算法之解决单源最短路径问题
java·数据结构
OpenGL29 分钟前
Android targetSdkVersion升级至35(Android15)相关问题
前端
Kali_0733 分钟前
使用 Mathematical_Expression 从零开始实现数学题目的作答小游戏【可复制代码】
java·人工智能·免费
rzl0244 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
时序数据说1 小时前
为什么时序数据库IoTDB选择Java作为开发语言
java·大数据·开发语言·数据库·物联网·时序数据库·iotdb
海天胜景1 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼1 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿1 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端