Vue 3中如何以编程方式为动态组件绑定响应式Props？

你的问题核心是：直接赋值title: this.text只是拷贝了当时的文本值，并没有建立响应式关联，所以后续输入框内容变化时，组件props不会更新。要实现类似:title="text"的响应式效果，核心是让props始终引用响应式数据的源，而非静态值拷贝。

方案一：用计算属性动态生成Props #

这种方式适合多组件、多props的场景，通过配置映射关系来统一管理响应式绑定：

修改App.vue代码：

<template>
  <div id="app">
    <button @click="setData">Set data</button>
    <input v-model="text" style="margin-bottom: 15px" />
    <!-- 直接绑定计算属性返回的组件和props -->
    <component
      :is="currentComponent"
      v-bind="currentProps"
    />
  </div>
</template>

<script>
import CustomComponent from "./CustomComponent.vue";

export default {
  name: "App",
  components: {
    CustomComponent,
  },
  data() {
    return {
      text: "Custom text",
      currentComponent: null,
      // 配置不同组件的props与当前实例响应式数据的映射
      componentPropsMap: {
        CustomComponent: {
          title: "text" // 组件的title props 绑定到当前实例的text属性
        }
      }
    };
  },
  computed: {
    currentProps() {
      if (!this.currentComponent) return {};
      const propsConfig = this.componentPropsMap[this.currentComponent.name];
      if (!propsConfig) return {};
      
      // 动态生成响应式props
      const props = {};
      for (const [propKey, dataKey] of Object.entries(propsConfig)) {
        props[propKey] = this[dataKey];
      }
      return props;
    }
  },
  methods: {
    setData() {
      this.currentComponent = CustomComponent;
    },
  },
};
</script>

方案二：简化版直接绑定响应式引用 #

如果场景简单，也可以直接在v-bind中使用动态对象，无需额外配置：

修改App.vue的模板和script：

<template>
  <div id="app">
    <button @click="setData">Set data</button>
    <input v-model="text" style="margin-bottom: 15px" />
    <component
      :is="dynamicComp?.component"
      <!-- 直接在v-bind里返回包含响应式引用的对象 -->
      v-bind="dynamicComp ? { title: text } : {}"
    />
  </div>
</template>

<script>
import CustomComponent from "./CustomComponent.vue";

export default {
  name: "App",
  components: {
    CustomComponent,
  },
  data() {
    return {
      text: "Custom text",
      dynamicComp: null,
    };
  },
  methods: {
    setData() {
      this.dynamicComp = {
        component: CustomComponent,
      };
    },
  },
};
</script>

原理说明 #

Vue的响应式依赖追踪需要在模板、计算属性或者监听函数中引用响应式数据：

• 原来的写法中，title: this.text是在setData执行时的一次性值拷贝，没有触发依赖追踪
• 计算属性或模板中的动态对象会实时引用this.text，当text变化时，Vue会自动更新组件的props

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