将数据传递到根Vue类组件

问题描述

我有一个使用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。是否总有我要指定我希望使用调用{时传递的值来实例化该组件{1}}？

解决方法

您尝试的操作不起作用，因为您的根组件将sns.heatmap呈现为子组件，并且在根组件中定义的数据与子组件的数据分开。它们是两个截然不同的组成部分，在这里没有覆盖。

我对Vue类组件不熟悉，但这是一种有效的解决方案。 MyComponent类扩展了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'
  }
})