Question

我正在尝试为现有的普通JS库开发Vue包装器组件。

该库传递了一个回调，当需要另一个项目时将调用该回调数据，并且需要执行此回调才能返回该数据。

包装器组件不需要知道此数据，而是实际计算或检索将在顶级Vue应用程序中处理。

我认为我正在寻找的是计算属性。

但是我找不到在其中定义计算属性的位置的示例一个组件，实际计算在父应用程序中处理。

这是我到目前为止所拥有的。（为简化起见，使用了简化的代码）

在普通的JS库中：

export default (pullDataCallback) => {
    // the repaint method gets called at regular intervals
    const repaint = () => {
        // ... render the current frame of animation ...
        newData = pullDataCallback();
    };

    return {
        // ... a bunch of other methods ...
    };
};

我的Vue包装器组件：

Vue.component('vue-wrapper', {
    'template': '<div class="vue-wrapper"></div>',
    'computed': {
        'dataPair': SOMETHING
    },
    'mounted': () => {
        this.plainJSLibrary = require('plain-js-lib')(() => {
            return this.dataPair
        });
    },
});

顶级Vue应用程序

new Vue({
    'el': '#vue-wrapper',
    'computed': {
        'dataPair': () => {
            // simplified example calculation
            return { 'x': 23, 'y': 42 };
        }
    }
});

如您所见，我的组件代码中有一些相当大的漏洞目前...任何对Vue更有经验的人都可以填写以下任何内容吗？差距。

计算属性和Vue组件

0 个答案: