Vue2+TypeScript如何向动态创建的组件传递属性？

算力阿峰

2026-7-1

解决方案

1. 动态挂载时通过Vue构造函数传递Prop

Vue2中动态挂载组件时，不要通过DOM元素设置属性传递Prop——DOM属性和Vue组件的Prop是独立的，组件不会自动读取DOM上的属性作为Prop值。正确的方式是在创建Vue实例时，通过render函数的参数传递Prop，或者使用propsData选项（后者更适合非渲染函数场景）。

针对你的ActivityStream组件，TypeScript环境下的示例代码如下：

import Vue from 'vue';
import ActivityStream from './ActivityStream.vue';

// 1. 创建DOM元素
const container = document.createElement('div');
document.body.appendChild(container);

// 2. 定义要传递的Prop（静态或动态数据都支持）
const props = {
  count: 10,
  language: 'zh-CN' // 动态数据直接传入即可，比如从state或接口获取的值
};

// 3. 挂载组件到DOM元素
const vm = new Vue({
  el: container,
  render: h => h(ActivityStream, {
    props: props // 这里传递所有Prop
  })
});

如果不用渲染函数，也可以用propsData选项（适合简单场景）：

const vm = new Vue({
  el: container,
  components: { ActivityStream },
  template: '<activity-stream :count="count" :language="language" />',
  data() {
    return {
      count: 10,
      language: 'zh-CN'
    };
  }
});

2. 后续更新Prop的方法

如果需要在组件挂载后更新Prop值，直接修改组件实例对应的关联数据即可，无需手动编写setter：

// 把props绑定到Vue实例的data中，修改data触发组件更新
const vm = new Vue({
  el: container,
  data() {
    return {
      currentCount: 10,
      currentLang: 'zh-CN'
    };
  },
  render: h => h(ActivityStream, {
    props: {
      count: this.currentCount,
      language: this.currentLang
    }
  })
});

// 后续更新时直接修改data
vm.currentCount = 20;
vm.currentLang = 'en-US';