如何在手动安装的 vue 组件上更新道具? [英] How do I update props on a manually mounted vue component?

问题描述

问题:有没有办法更新像这样创建的手动安装的 vue 组件/实例的道具?我传入一个名为 item 的对象作为组件的 data 属性.

let ComponentClass = Vue.extend(MyComponent);让实例 = 新组件类({道具数据:{数据:项目}});//挂载实例.$mount();

为什么

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

通过像这样在 vis.js 的模板函数中手动创建和安装组件，我设法在时间轴上呈现组件.

模板:函数(项目，元素，数据){//从与项目一起传入的组件创建一个类让 ComponentClass = Vue.extend(item.component);//从该组件创建一个新的 vue 实例并将该项目作为 prop 传入让实例 = 新组件类({propsData:{数据:项目}，家长: vm});//挂载实例.$mount();返回实例.$el;}

item.component 是一个接受数据属性的 vue 组件.

我可以通过这种方式创建和挂载 vue 组件，但是当 item 更改时，我需要更新组件上的 data 属性.

解决方案

如果你在 Vue 之外定义了一个对象，然后在 data 中使用它作为一个 Vue 实例，它将会变成响应式的.在下面的示例中，我以这种方式使用 dataObj.尽管我遵循使用 data 函数的约定，但它返回一个预定义的对象(如果我使用了 data: dataObj，它将以完全相同的方式工作).

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

const ComponentClass = Vue.extend({模板:'<div>嗨 {{data}}</div>'});const dataObj = {数据:'东西'}让实例 = 新组件类({数据() {返回数据对象；}});//挂载实例.$mount();document.getElementById('target').appendChild(instance.$el);setTimeout(() => {dataObj.data = '另一件事';}, 1500);

<script src="https://unpkg.com/vue@latest/dist/vue.js"></脚本><div id="目标">

Question: Is there any way to update the props of a manually mounted vue component/instance that is created like this? I'm passing in an object called item as the component's data prop.

let ComponentClass = Vue.extend(MyComponent);

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

// mount it
instance.$mount();

Why

I have a non vue 3rd party library that renders content on a timeline (vis.js). Because the rest of my app is written in vue I'm attempting to use vue components for the content on the timeline itself.

I've managed to render components on the timeline by creating and mounting them manually in vis.js's template function like so.

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 is a vue component that accepts a data prop.

I am able to create and mount the vue component this way, however when item changes I need to update the data prop on the component.

解决方案

If you define an object outside of Vue and then use it in the data for a Vue instance, it will be made reactive. In the example below, I use dataObj that way. Although I follow the convention of using a data function, it returns a pre-defined object (and would work exactly the same way if I'd used data: dataObj).

After I mount the instance, I update dataObj.data, and you can see that the component updates to reflect the new value.

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>

这篇关于如何在手动安装的 vue 组件上更新道具?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！