将数据传递给根 Vue class 组件

Question

我有一个使用 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?

Answer 1

您尝试的方法不起作用，因为您的根组件正在呈现 MyComponent 作为子组件，并且根组件中定义的数据与子组件的数据是分开的。它们是两个不同的组件，这里没有覆盖。

我不熟悉 Vue class 组件，但这是一个普通的解决方案。 MyComponent class 扩展了 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>

将数据传递给根 Vue class 组件

Passing data to root Vue class component

typescript

vue.js

vue-component

vuejs2

vue-class-components