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

Question

问题： 有没有办法更新像这样创建的手动安装的 vue 组件/实例的道具？我传入一个名为 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 属性。

Answer 1

在 Vue 2.2+ 中，您可以使用 $props。 事实上，我的用例和你的完全一样，有一个 Vue 项目、vis-timeline 和带有手动安装组件的项目。

在我的例子中，为 $props.data 分配一些东西会触发观察者和整个反应机器。

编辑：而且，正如我之前应该注意到的，这不是你应该做的。控制台中有一个错误日志，告诉 prop 不应该像这样直接突变。所以，我会尝试寻找其他解决方案。

Answer 2

以下是我能够以编程方式传递和更新道具的方法：

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

const propsObj = {
  data: 'something'
}

const instance = new ComponentClass()

const props = Vue.observable({
      ...instance._props,
      ...propsObj
})

instance._props = props

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

setTimeout(() => {
  props.data = 'another thing';  // or instance.data = ...
}, 1500);

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

Answer 3

如果你在 Vue 之外定义了一个对象，然后在 Vue 实例的 data 中使用它，它将变为反应式。在下面的示例中，我以这种方式使用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>