在A-Frame組件上，如何在功能之間共享數據？

Question

我正在製作A-Frame組件，我想在諸如init之類的功能和其他自定義組件處理程序之間共享數據。

我想出如何添加到組件架構，允許輸入從DOM使用this.data設置一個變量以下這個文檔： https://aframe.io/docs/0.4.0/core/component.html#component-prototype-properties

但是我有麻煩，有時this.data的值將恢復到DOM的初始狀態，而不是反映運行時修改。是否有更好的方式來跨組件共享數據？

Answer 1

有兩種推薦的方法將數據存儲在A-Frame組件中，類似於公共和私有屬性。

架構（公衆）的組件的架構聲明

屬性是公共的，可以與setAttribute設置以及帶getAttribute和this.data.____訪問。 注意：它是而不是安全地直接修改this.data，因爲A-Frame將在接收來自DOM的更新時覆蓋數據。

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 
    } 
});