如何通过编程方式修改Vue 3插槽内容？

为什么修改ref后内容没变化？ #

• Vue中useSlots()返回的插槽VNode是父组件传递的不可变数据，子组件仅能渲染这些VNode，无法直接修改或控制父组件传入的插槽内容。
• 你更新的slotref只是自定义响应式变量，但插槽的渲染逻辑由Vue内部控制，并不会关联到这个自定义ref的变化，所以修改后视图不会更新。

正确实现方式 #

如果要在子组件中控制插槽内容的重复/添加，需要自己管理渲染的VNode列表，用响应式状态驱动视图更新：

子组件代码示例 #

<template>
  <div>
    <!-- 渲染自己管理的VNode列表 -->
    <component 
      v-for="(node, idx) in renderedSlots" 
      :key="idx" 
      v-bind="node.props" 
      v-on="node.props?.on"
    >
      {{ node.children }}
    </component>
    <button @click="duplicateFirstSlot">添加重复内容</button>
  </div>
</template>

<script setup>
import { ref, useSlots } from 'vue'

const slots = useSlots()
// 初始化时复制默认插槽的VNode，转为响应式列表
const renderedSlots = ref(slots.default ? [...slots.default()] : [])

const duplicateFirstSlot = () => {
  if (renderedSlots.value.length === 0) return
  // 复制第一个VNode（注意深拷贝或浅拷贝根据实际需求调整）
  const clonedNode = { ...renderedSlots.value[0] }
  renderedSlots.value = [...renderedSlots.value, clonedNode]
}
</script>

关键说明 #

1. 用响应式refrenderedSlots存储要渲染的VNode列表，初始值复制自父组件传入的插槽内容。
2. 点击按钮时，复制已有VNode并添加到列表中，因为renderedSlots是响应式的，Vue会自动触发视图更新。
3. 使用<component>动态渲染VNode，确保正确传递props和事件。

内容的提问来源于stack exchange，提问作者AHOYAHOY