问题：有什么方法可以更新这样创建的手动安装的Vue组件/实例的道具？我传入了一个称为item组件的dataprop的对象。
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该组件上的prop。
如果您在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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句