Typescript 将数据传递到根Vue类组件

我使用like so定义了一个组件：

我需要重复地将这个组件实例化为根组件，每次传入不同的数据。例如，我尝试过这样做：

const vm = new Vue({
  el: myElement,
  render: (h) => h(MyComponent),
  data: {value: 1},
});

---

但是当我查看组件中的

这个.value

时，它被设置为0而不是1。是否需要我指定，我希望使用调用

new Vue

时传入的值实例化组件？

您尝试的方法无效，因为您的根组件正在将

MyComponent

呈现为子组件，并且根组件中定义的数据与子组件的数据分离。它们是两个不同的组件，这里没有覆盖

我不熟悉Vue类组件，但这里有一个普通的解决方案。

MyComponent

类扩展了

Vue

，因此您可以直接将

MyComponent

实例化为根组件，并且在实例化过程中提供的任何附加选项都将混合到基本选项中

因此，您只需执行以下操作：

const vm = new MyComponent({
  el: myElement,
  data: { value: 1 },
})

无需指定渲染函数，因为它已由

MyComponent

定义

下面是一个可运行的片段，它演示了我的意思：

const MyComponent=Vue.extend({
模板：“{value}}”，
数据（）{
返回{
值：“基”
}
}
})
新霉素组分({
el:“#应用程序”，
数据：{
值：“扩展”
}
})

const vm = new MyComponent({
  el: myElement,
  data: { value: 1 },
})