Javascript 计算属性和Vue组件

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

库被传递一个回调，当它需要另一个项时调用该回调 并且需要此回调来返回该数据

包装器组件不需要知道这些数据和实际计算 或检索将在顶级Vue应用程序中处理

我想我要找的是一个计算属性

但我找不到在中定义计算属性的示例 组件和实际计算在父应用程序中处理

这就是我目前所拥有的。（简化代码以保持简单）

在普通JS库中：

导出默认值（pullDataCallback）=>{
//repaint方法会定期调用
常量重新绘制=（）=>{
//…渲染动画的当前帧。。。
newData=pullDataCallback（）；
};
返回{
//…一系列其他方法。。。
};
};

我的Vue包装器组件：

Vue.component（'Vue-wrapper'{
“模板”：“，
“计算的”：{
“数据对”：什么
},
'挂载'：（）=>{
this.plainJSLibrary=require（'plain-js-lib'）（（）=>{
返回此.dataPair
});
},
});

顶级Vue应用程序

newvue({
“el”：“vue包装器”，
“计算的”：{
'数据对'：（）=>{
//简化实例计算
返回{'x'：23，'y'：42}；
}
}
});

正如您所看到的，我的组件代码中有一些相当大的漏洞 目前。。。有谁对Vue更有经验吗

---

差距。

1）不要对实例属性使用箭头函数（即上面显示的

挂载的

），2）您试图设置的数据属性

plainJSLibrary

，该属性未首先在

数据中声明。3） 不清楚为什么在组件和根目录中都定义了
dataPair
。4）您没有显示模板代码，显示组件是否可以访问根目录。5）不清楚为什么涉及根目录。添加库作为组件数据属性可能不太好，但除此之外，我猜您是在询问如何将根
数据对
传递给组件。您可以通过这种方式将计算结果从根目录传递到组件，而不是在组件中再次定义计算结果。该库不是数据属性，这就是为什么在
data:{}
中没有提到它的原因。我看不到其他地方可以保留Vue组件的“私有”属性。现在我明白了，如果我将
dataPair
设置为普通属性，那么任何父级都可以根据需要向其发布值。否组件不应访问根目录。。。我将添加一个事件来指示对更多数据的请求。为什么对实例属性使用箭头函数是“错误的”？根“根本不涉及”，因为数据是任意的，组件“用户”应用程序负责计算和/或检索它。我已将
this.plainJSLibrary
更改为
this.$\u vueWrapper\u plainJSLibrary
，它应该保持私有，并忽略与数据组件属性的冲突？？？您可以使用该库，而无需将其附加到组件；它可以与应用程序保持平行或在应用程序之外。arrow函数不好，因为它将预期的
此
引用更改为其他引用，并阻止对实例的访问。对于一个简单的应用程序，在根中存储<代码> DATAPAIR／代码>并将其作为道具传递是有意义的，但是只要有全局应用程序数据，就考虑VUEX，以实现不需要道具的更干净的实现。