Ionic 4组件的"property"与"attribute"有什么区别？

Question

https://ionicframework.com/docs/api/col

对于列宽度，它说sizelg是属性，大小为lg是属性。我要使用哪个？为什么？什么时候？

这个：

<ion-col size-lg="6"></ion-col>

或以下：

<ion-col sizeLg="6"></ion-col>

或以下：

<ion-col [size-lg]="6"></ion-col>

或以下：

<ion-col [sizeLg]="6"></ion-col>

...所有我都可以做的事情，但是我不确定为什么以及何时想要，并且在文档中尚不清楚。

在离子的上下文中，为什么sizelg属性和size-lg是一个属性，有什么含义？

Answer 1

我不知道与释放前状态相比，离子4文档有多远，但是您的问题实际上触及了基础的模具构建器及其设计的行为，尤其是对于非角度使用的行为，即作为裸网组件。

一个快速的答案是：属性直接反映属性，概括了角度属性，以便它以非常相似的方式甚至在Angular外部。

。

因此，如果您在Angular中使用离子4，则所有4个语法都应起作用(即在功能上等效(，[sizeLg]="6"可能是最熟悉的形式。

模板是构建工具为离子4提供动力，将其编译为Web组件(自定义元素(。在模具中，您以某种方式设计组件的角度/反应方式，编译器将所有输入属性转换为JS属性和HTML属性，模仿其他标准HTML元素的API。考虑一个<input type="checkbox">元素及其checked属性，它也是读/写JS属性(您可以执行document.querySelector("input").checked = true(。

模板对其输出Web组件做到了这一点，反映了所有裸露的JS输入属性(通常在骆驼中(为HTML属性(在其等效的蛇形类型中(，因此您可以以任何两种方式定义输入，例如标准HTML元素，即使您不使用Angular。

但是，在使用角(当然是非方括号形式(时，您将仅限于[size-lg]="6"。因此，离子添加了一个角包装器，该包装器告诉Angular有一个基本的@Input() sizeLg属性，现在您可以使用更角度的[sizeLg]="6"表格。

Answer 2

这个

<ion-col size-lg="6"></ion-col>

和

<ion-col sizeLg="6"></ion-col>

两者都是相同的，但是在离子4中，他们引入了此sizeLg语法，因为是可变名称的JavaScript标准。我建议使用这种方式

<ion-col sizeLg="6"></ion-col>

和

<ion-col [size-lg]="6"></ion-col>
<ion-col [sizeLg]="6"></ion-col>

当=之后的事物是代码中的变量时，使用

。