Skip to content

最佳实践

mantou edited this page Dec 12, 2019 · 4 revisions

Attr 和 Prop 的选择

gem 的 Attr 和 Prop 都是自定义元素传递数据的方式,在概念上等于 React/Vue 中的组件 Prop, 但由于 DOM 中有些 Attr 也能直接通过 Prop 读写(如 id), 所以在 gem 中应该优先使用 Prop,只有当 Attr 的值能用 string 表示时才使用 Attr。

ts 集成

gem 通过静态属性 observedAttributes, observedPropertys 监听 Attr, Prop,受监听的 Attr 能像 Prop 一样直接访问, 所以在 TS 中还需要手动声明字段;为了避免多处声明,在 ts 中应该使用装饰器:

/**
 * @attr first-name
 * @attr last-name
 * @fires sayhi
 * @slot light
 */
@customElement('app-children')
export class Children extends GemElement {
  @attribute firstName: string;
  @attribute lastName: string;
  @property message: Message;
  @emitter sayhi: Function;
}
Clone this wiki locally