Emberjs监视从父组件传递的变量更改？

Question

我在子组件上有以下代码以侦听更改

import Component from '@ember/component';
import Ember from 'ember';

export default Component.extend({

  coordinates: Ember.computed("mouse_x", "mouse_y", function () {
    let val = ` ${mouse_x},${mouse_y}`;
    console.log(val);
    return val;
  }),

  coords_change_observer: Ember.observer('coordinates', function () {
    console.log(this.coordinates);
  })
});

当我从视图验证时，正确设置了mouse_x和mouse_y值。 我正在使用另一个组件将其传递给此组件

{{#application-properties mouse_x=mouse_x mouse_y=mouse_y}}
{{/application-properties}}

基本目标是监听通过父级传递的变量的变化并对其进行处理。 问题既不是computed方法也不是observer方法。 我在哪里错呢？

请注意，它们都是组件，其中一个是另一个组件内部的子组件。 任何帮助表示赞赏

Answer 1

由于灰烬仅仅是通过重新使用是动态的DOM的部分非常有效，我已经发现addObserver发现这里在为各种也没有分量模板消耗在我的应用程序的项目非常有用的文档。

didInsertElement() {
    this._super(...arguments);

    // this is important b/c even though url may change, glimmer does not recognize this as a change and will not re-fire didInsertElement
    this.addObserver('media.url', this, '_setHref');
}

还要注意，如果您能够利用@tracked ， @tracked是跟踪状态变化的新方法。

https://github.com/emberjs/rfcs/blob/be351b059f08ac0fe709bc7697860d5064717a7f/text/0000-tracked-properties.md

https://www.pzuraq.com/coming-soon-in-ember-octane-part-3-tracked-properties/

https://glimmerjs.com/guides/tracked-properties