我有一个使用 Vue class components 定义的组件像这样:
@Component
export default class MyComponent extends Vue {
value = 0;
}
我需要反复将这个组件实例化为根组件,每次传入不同的数据。例如,我试过这样做:
const vm = new Vue({
el: myElement,
render: (h) => h(MyComponent),
data: {value: 1},
});
但是当我查看组件中的 this.value
时,它被设置为 0 而不是 1。无论如何我是否可以指定我希望使用该值实例化该组件调用 new Vue
时传入?
最佳答案
您尝试的方法不起作用,因为您的根组件正在将 MyComponent
呈现为子组件,并且根组件中定义的数据与子组件的数据是分开的。它们是两个不同的组件,这里没有重写。
我不熟悉 Vue 类组件,但这是一个普通的解决方案。 MyComponent
类扩展了 Vue
,因此您可以将 MyComponent
直接实例化为根组件,并且您在实例化期间提供的任何其他选项都将被混合进入基本选项。
所以你只需要做这样的事情:
const vm = new MyComponent({
el: myElement,
data: { value: 1 },
})
无需指定渲染函数,因为它已由 MyComponent
定义。
这是一个可运行的片段,它演示了我的意思:
const MyComponent = Vue.extend({
template: '<div>{{ value }}</div>',
data() {
return {
value: 'base'
}
}
})
new MyComponent({
el: '#app',
data: {
value: 'extended'
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>
关于typescript - 将数据传递给根 Vue 类组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63975286/