如何在手动安装的 vue 组件上更新道具？

Question

问题： 有没有办法更新像这样创建的手动安装的 vue 组件/实例的 props？我正在传入一个称为item组件data道具的对象。

let ComponentClass = Vue.extend(MyComponent);

let instance = new ComponentClass({
    propsData: { data: item }
});

// mount it
instance.$mount();

为什么

我有一个非 vue 3rd 方库，可以在时间轴 (vis.js) 上呈现内容。因为我的应用程序的其余部分是用 vue 编写的，所以我试图将 vue 组件用于时间轴本身的内容。

我设法通过在 vis.js 的模板函数中手动创建和安装组件来在时间线上呈现组件。

template: function(item, element, data) {

    // create a class from the component that was passed in with the item
    let ComponentClass = Vue.extend(item.component);

    // create a new vue instance from that component and pass the item in as a prop
    let instance = new ComponentClass({
        propsData: { data: item },
        parent: vm
    });

    // mount it
    instance.$mount();

    return instance.$el;
}

item.component 是一个接受数据道具的 vue 组件。

我能够以这种方式创建和挂载 vue 组件，但是当item发生更改时，我需要更新data组件上的 prop。

Answer 1

如果您在 Vue 外部定义一个对象，然后在dataVue 实例中使用它，它将成为响应式的。在下面的例子中，我就使用dataObj这种方式。虽然我遵循使用的约定data，但它返回一个预定义的对象（如果我使用的话，它的工作方式完全相同data: dataObj）。

挂载实例后，我更新dataObj.data，您可以看到组件更新以反映新值。

const ComponentClass = Vue.extend({
  template: '<div>Hi {{data}}</div>'
});

const dataObj = {
  data: 'something'
}

let instance = new ComponentClass({
  data() {
    return dataObj;
  }
});

// mount it
instance.$mount();
document.getElementById('target').appendChild(instance.$el);

setTimeout(() => {
  dataObj.data = 'another thing';
}, 1500);

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="target">
</div>