计算属性和Vue组件

问题描述

我正在尝试为现有的普通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更有经验的人都可以填写以下任何内容吗？差距。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

computed-properties javascript vue.js