将数据传递给根 Vue 类组件

Posted 2023-02-23

【中文标题】将数据传递给根 Vue 类组件

【英文标题】：Passing data to root Vue class component

【发布时间】：2021-01-06 13:06:06

【问题描述】：

我有一个使用 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 时传入的值来实例化组件?

【参考方案1】：

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

我不熟悉 Vue 类组件，但这里有一个普通的解决方案。 MyComponent 类扩展了Vue，因此您可以将MyComponent 直接实例化为根组件，并且您在实例化期间提供的任何其他选项都将混合到基本选项中。

所以你只需要这样做：

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

不需要指定渲染函数，因为它已经被MyComponent定义了。

这是一个可运行的 sn-p，说明了我的意思：

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>