在 A-Frame 组件上，如何在函数之间共享数据？

Question

我正在制作一个 A-Frame 组件，我想在函数init和其他自定义组件处理程序之间共享数据。

我想出了如何添加到组件模式以允许来自 DOM 的输入使用this.data以下文档设置变量：https : //aframe.io/docs/0.4.0/core/component.html#component-prototype-特性

但是我遇到了麻烦，有时this.dataDOM的值会从 DOM 恢复到初始状态，而不是反映运行时修改。有没有更好的方法来跨组件共享数据？

Answer 1

有两种推荐的方式在 A-Frame 组件中存储数据，类似于公共和私有属性。

架构（公共）

在组件的模式中声明属性是公共的，并且可以进行设置setAttribute，并与这两个访问getAttribute和this.data.____。注：这是不是安全的修改this.data直接，因为从DOM接收更新时，A型架将覆盖数据。

HTML：

<a-entity foo="bar: 10"></a-entity>

JS：

AFRAME.registerComponent('foo', {
  schema: {
    bar: {default: 25}
  },
  init: function () {
    console.log(this.data.bar); // 10

    this.data.bar = 5; // THIS CHANGE MAY BE LOST.
  },
  doStuff: function () {
    console.log(this.data.bar); // 10
    this.el.setAttribute('bar', 'foo', 15);
    console.log(this.data.bar); // 15
  }
});

属性（私人）

对于打算在组件中使用的数据，您还可以将它们直接分配给this. 当数据仅在组件内使用且不需要在 HTML 中声明时，这是最佳选择。

JS：

AFRAME.registerComponent('foo', {
  init: function () {
    this.baz = 'hello';
    console.log(this.baz); // hello
  },
  doStuff: function () {
    console.log(this.baz); // hello
    this.baz = 'bonjour';
    console.log(this.baz); // bonjour
  }
});