Polymer 为什么Webcomponent对象值在同一Webcomponent的不同实例之间共享?
我用Polymer创建了一个名为TestElement的web组件,如下所示。它只是有一个对象值和一个向该组件添加值的函数Polymer 为什么Webcomponent对象值在同一Webcomponent的不同实例之间共享?,polymer,web-component,polymer-2.x,Polymer,Web Component,Polymer 2.x,我用Polymer创建了一个名为TestElement的web组件,如下所示。它只是有一个对象值和一个向该组件添加值的函数 <dom-module id="test-element"> <template>Test Element</template> <script> class TestElement extends Polymer.Element { static get is() { return "test-el
<dom-module id="test-element">
<template>Test Element</template>
<script>
class TestElement extends Polymer.Element {
static get is() { return "test-element"; }
static get properties() {
return {
_myVar: {
type: Object,
value: {},
},
};
}
addNew(key, val) {
this._myVar[key] = val;
}
}
customElements.define(TestElement.is, TestElement);
</script>
</dom-module>
在上面的控制台日志中,我希望有{'key1':'val-1'},但是得到了{'key1':'val-1','key2':'val2'}。为什么?
如果您想获得一个工作示例,请参考本指南:
在仔细考虑的过程中,我找到了一个解决办法 测试元件 TestElement类扩展了Polymer.Element{ 静态get为{返回测试元素;}
static get properties() {
return {
_myVar: {
type: Object,
value: {},
},
};
}
ready() {
super();
_myVar = {}; // if initialized like this, the objects are not shared anymore.
}
addNew(key, val) {
this._myVar[key] = val;
}
}
customElements.defineTestElement.is,TestElement;
下面记录了我的预期:
class ParentElement extends Polymer.Element {
static get is() { return "parent-element"; }
ready() {
super.ready();
this.$.myElement.addNew('key1', 'val-1');
this.$.myElement2.addNew('key2', 'val2');
// Expected to have {'key1': 'val-1'} and got {'key1': 'val-1'} check! :)
console.log(this.$.myElement._myVar);
}
}
JavaScript对象是通过引用的,当您定义默认值时,它是单个对象
static get properties() {
return {
_myVar: {
type: Object,
value: {},
},
};
}
为了避免这种情况,可以为每个组件实例返回一个新对象
static get properties() {
return {
_myVar: {
type: Object,
value: function() { return {}; },
},
};
}
static get properties() {
return {
_myVar: {
type: Object,
value: function() { return {}; },
},
};
}