polymer - 我应该使用属性或属性来传递数据吗？

Question

在lit-element大多数情况下，通过属性和属性将数据从父组件传递到子组件会导致相同的结果。

我想知道在哪种情况下我应该使用属性，而在哪种情况下属性？

Answer 1

属性和属性的区别在于属性在 DOM 中表示，而属性不是。元素可以决定将属性反映回属性，但这有点正交。例子：

<my-button raised></my-button>

这里，raised是一个布尔属性，以这种方式传递数据很方便，因为您可以在 DOM 中以声明方式进行。<my-button>的实现不必知道是使用属性还是属性来传递此数据，因为属性会自动转换为属性（如果声明了具有匹配名称的属性）。

以下也适用（lit-element具体），但直接分配属性。

<my-button .raised=true></my-button>

的实现my-button可以决定对属性的更改是否反映回属性。如果您想使用该属性（例如，在 CSS 中进行样式设置），这将非常有用。

但是，通常，您只需分配属性并让自定义元素决定属性是否反映回属性。假设您想以编程方式控制按钮，您只需分配属性

this.button_.raised = true;

而不是写

this.button_.setAttribute('raised', true);

请注意，这始终适用于自定义元素甚至一些本机元素（例如，input'svalue也是一个属性）。但是你不能写：

this.myDiv_.id = 'container';

因为<div>s 没有属性，你必须使用setAttribute().