我应该使用属性还是属性来传递数据？

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().