Vue中如何在运行时修改插槽内部传入组件的prop属性

根因说明 #

你现在的操作不生效，和生命周期选择有一定关联，但核心问题是操作方式不符合Vue的渲染逻辑：

• 插槽返回的VNode是父组件渲染阶段生成的静态对象，你在beforeMount/beforeUpdate生命周期中直接修改VNode的props属性时，本次渲染的diff流程已经走完，修改后的属性不会被纳入渲染计算，所以实际渲染还是用的原始值，控制台打印能看到修改只是因为你修改了内存中VNode对象的属性，和实际渲染结果没有关联。
• 不需要修改slottedElement.type.props，这个属性是组件的静态Prop定义元数据，仅用于Prop校验规则声明，修改它不会对当前传入组件实例的Prop值产生任何影响，反而会破坏全局的组件Prop校验逻辑。

正确实现方案 #

方案1：使用作用域插槽（官方推荐，无兼容性风险） #

这是Vue原生支持的动态控制插槽子组件参数的方式，完全符合框架设计规范，不需要操作底层VNode：

<!-- 父组件侧使用你的组件 -->
<YourComponent>
  <template #default="{ mode }">
    <ChildComponent :mode="mode" />
  </template>
</YourComponent>

<!-- 你的组件内部实现 -->
<template>
  <div class="your-component-wrapper">
    <!-- 渲染插槽时传入你要动态修改的mode值 -->
    <slot :mode="customMode" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      customMode: 'edit' // 可以任意动态修改这个值，会自动同步给插槽子组件
    }
  }
}
</script>

方案2：渲染函数阶段修改VNode（仅特殊场景使用） #

如果你确实需要无感知修改插槽传入的子组件Prop，不需要父组件配合，可以在render函数阶段处理VNode，不要在生命周期钩子中处理：

// Vue3 示例
import { h } from 'vue'
export default {
  render() {
    const slotVNodes = this.$slots.default?.() || []
    const processedVNodes = slotVNodes.map(node => {
      // 匹配目标子组件，可根据type.name、class等属性判断
      if (node.type?.name === 'TargetChild') {
        // 返回新的VNode，合并原始props并覆盖mode属性
        return h(node.type, {
          ...node.props,
          mode: 'custom-value'
        }, node.children)
      }
      return node
    })
    return h('div', processedVNodes)
  }
}

注意该方案依赖Vue内部VNode结构，不同版本之间可能存在兼容性差异，非必要优先使用方案1。

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