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

Question

问题： 有没有办法更新像这样创建的手动安装的 vue component/instance 的道具？我传入一个名为 item 的对象作为组件的 data 属性。

let ComponentClass = Vue.extend(MyComponent);

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

// mount it
instance.$mount();

为什么

我有一个非 Vue 第三方库，可以在时间轴上呈现内容 (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 之外定义了一个对象，然后在 data 中将其用于 Vue 实例，它将变成响应式的。在下面的示例中，我以这种方式使用 dataObj。尽管我遵循使用 data 函数的约定，但它 returns 是一个预定义的对象（如果我使用 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>

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 2.2+ 中，您可以使用 $props。事实上，我的用例与你的完全相同，有一个 Vue 项目、vis-timeline 和带有手动安装组件的项目。

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

编辑：而且，正如我早该注意到的那样，这不是您应该做的。控制台中有一条错误日志，告诉我们不应该像这样直接改变 prop。所以，我会尝试找到另一种解决方案。

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

How do I update props on a manually mounted vue component?

vue.js

vis.js