0

更明确地说，子组件创建一个属性，该属性依赖于父组件传递的参数。我没有直接在子模板中使用父参数（这种情况下工作得很好）。

来自 React 背景，我的心智模型表明传递给组件的新参数将触发重新渲染。但我知道 Glimmer 对其@tracked装饰器的处理方式有所不同。

好的，这是人为的例子。如需演示，请前往Glimmer Playground。

// parent-template.hbs
<button onclick={{action doubleNumber}}>Double Number</button>
<div>
  Parent - {{number}}
</div>

<Child @number={{number}} />

// parent-component.ts
import Component, { tracked } from '@glimmer/component';

export default class extends Component {
  @tracked number = 2;

  doubleNumber() {
    this.number = this.number * 2;
  }
}

// child-template.ts
<div>
  Child will render double of parent {{doubleOfParent}}
</div>

// child-component.ts
import Component, { tracked } from "@glimmer/component";

export default class extends Component {
  args: {
    number: number;
  }

  get doubleOfParent () {
    return 2 * this.args.number;
  }
};

在这里，每次单击按钮时，父级都会显示双倍的数字。但是孩子永远不会重新渲染？

我的问题是我们是否总是需要tracked在模板中包含变量。在这种情况下number。并像这样表达子模板

<div>
  Child will render double of parent {{double @number}}
</div>

这double是使数字翻倍的助手。

tracked如果是这样，模板中包含属性/参数的原因是什么？

4

1 回答 1

2

看起来您的doubleOfParent()方法缺少@tracked注释，因为它的输出取决于args属性：

import Component, { tracked } from "@glimmer/component";

export default class extends Component {
  args: {
    number: number;
  }

  @tracked('args')
  get doubleOfParent() {
    return 2 * this.args.number;
  }
};

您可以在https://glimmerjs.com/guides/tracked-properties找到有关此主题的更多信息

于 2017-12-28T13:21:14.177 回答