处理两个依赖Polymer JS组件通信的最佳实践及就绪通信机制咨询

针对你这种两个相互依赖的Polymer组件场景，我推荐两种低耦合且可靠的实现方式，具体选择取决于你对组件解耦的需求：

方案一：自定义就绪事件 + 双向监听（低耦合首选） #

这种方式让组件通过事件通知自己的就绪状态，完全不需要直接引用对方，耦合度极低，适合复杂场景。

步骤1：给每个组件添加就绪事件派发 #

在两个组件的生命周期钩子中（推荐用attached()结合async()，确保异步初始化操作也完成），派发自定义的component-ready事件：

// polymer-component2.js
Polymer({
  is: 'polymer-component2',
  attached() {
    // 用async确保组件DOM、属性和异步操作（比如数据加载）都完成
    this.async(() => {
      this.dispatchEvent(new CustomEvent('component-ready', {
        bubbles: true,
        composed: true,
        detail: { componentId: this.id }
      }));
    });
  }
});

// polymer-component1.js
Polymer({
  is: 'polymer-component1',
  properties: {
    for: String
  },
  attached() {
    this._selfReady = true;
    this._checkReadyStatus();
    
    // 监听目标组件的就绪事件
    this.addEventListener('component-ready', (e) => {
      if (e.detail.componentId === this.for) {
        this._targetReady = true;
        this._checkReadyStatus();
      }
    });
  },
  _checkReadyStatus() {
    // 只有当自身和目标组件都就绪时，才开始通信
    if (this._selfReady && this._targetReady) {
      this._startCommunication();
    }
  },
  _startCommunication() {
    // 这里可以安全地和目标组件交互
    const target = document.getElementById(this.for);
    // 示例：调用目标组件的方法
    target.refreshData();
    // 示例：监听目标组件的自定义事件
    target.addEventListener('data-updated', (e) => {
      console.log('收到组件2的数据更新:', e.detail);
    });
  }
});

方案二：直接引用 + 监听内置dom-ready事件（简单场景首选） #

如果你的组件关系明确，且不需要太高的解耦，可以直接获取目标组件，监听Polymer内置的dom-ready事件，确保双方都完成DOM初始化：

// polymer-component1.js
Polymer({
  is: 'polymer-component1',
  properties: {
    for: String
  },
  attached() {
    this._target = document.getElementById(this.for);
    // 监听自身和目标组件的dom-ready事件
    this.addEventListener('dom-ready', () => this._verifyBothReady());
    if (this._target) {
      this._target.addEventListener('dom-ready', () => this._verifyBothReady());
    }
  },
  _verifyBothReady() {
    // 确认自身和目标组件都完成DOM构建
    if (this._domReady && this._target && this._target._domReady) {
      // 开始安全通信
      this._target.set('someProperty', '来自组件1的数据');
    }
  }
});

关键注意事项 #

• 避免在ready()钩子中直接通信：此时组件可能还未插入DOM，或者异步初始化未完成，容易出现找不到组件的问题。
• 优先选择自定义事件方案：如果未来组件结构调整，这种方式的改动成本更低，代码也更易维护。
• 若组件有异步操作（比如AJAX请求），需要在异步操作完成后再派发就绪事件，确保组件真正处于可用状态。

内容的提问来源于stack exchange，提问作者Manoj Sawant