Polymer框架：兄弟元素间的数据传递方案咨询

Got it, this is a super common pain point when building Polymer apps—you don't want to reparent elements just to pass data between siblings, right? Here are a few solid, practical approaches I’ve used in production that work great:

1. Shared Observable State Store #

Create a reusable observable state object that both sibling elements reference. When one element updates the state, the other picks up changes automatically thanks to Polymer's property binding system.

// Define a shared state module (can live in a separate file)
const sharedAppState = Polymer.Base.create({
  is: 'shared-app-state',
  properties: {
    activeUser: {
      type: Object,
      notify: true, // Critical for triggering updates across bound elements
      value: () => ({})
    }
  }
});

// Sibling Element A
class UserProfile extends Polymer.Element {
  static get is() { return 'user-profile'; }
  static get properties() {
    return {
      appState: {
        type: Object,
        value: () => sharedAppState
      }
    };
  }
  
  updateUser(name) {
    // Modify the shared state—all bound elements will react
    this.appState.activeUser = { name: name, id: 123 };
  }
}
customElements.define(UserProfile.is, UserProfile);

// Sibling Element B
class UserDashboard extends Polymer.Element {
  static get is() { return 'user-dashboard'; }
  static get properties() {
    return {
      appState: {
        type: Object,
        value: () => sharedAppState,
        observer: '_onUserChanged' // Triggered when state updates
      }
    };
  }
  
  _onUserChanged(newUser) {
    console.log('Dashboard received user data:', newUser);
    // Update UI with new user info
  }
}
customElements.define(UserDashboard.is, UserDashboard);

This keeps your data flow clean and decoupled—neither element needs to know about the other, just the shared state.

2. Leverage Your Common Parent Element #

Even if you can’t make one sibling the parent, these elements must share a common parent somewhere in the DOM. Use that parent as a data middleman with two-way binding:

<!-- Parent Element -->
<dom-module id="page-container">
  <template>
    <!-- Bind both siblings to the same parent property -->
    <user-profile active-user="{{currentUser}}"></user-profile>
    <user-dashboard active-user="{{currentUser}}"></user-dashboard>
  </template>
  <script>
    class PageContainer extends Polymer.Element {
      static get is() { return 'page-container'; }
      static get properties() {
        return {
          currentUser: {
            type: Object,
            value: () => ({})
          }
        };
      }
    }
    customElements.define(PageContainer.is, PageContainer);
  </script>
</dom-module>

<!-- UserProfile (Element A) -->
<dom-module id="user-profile">
  <template>
    <button on-click="_updateUser">Update Name</button>
  </template>
  <script>
    class UserProfile extends Polymer.Element {
      static get is() { return 'user-profile'; }
      static get properties() {
        return {
          activeUser: {
            type: Object,
            notify: true // Enable two-way binding to parent
          }
        };
      }
      
      _updateUser() {
        this.activeUser = { name: 'Mia Carter', id: 456 };
      }
    }
    customElements.define(UserProfile.is, UserProfile);
  </script>
</dom-module>

<!-- UserDashboard (Element B) -->
<dom-module id="user-dashboard">
  <template>
    <h2>Welcome, [[activeUser.name]]!</h2>
  </template>
  <script>
    class UserDashboard extends Polymer.Element {
      static get is() { return 'user-dashboard'; }
      static get properties() {
        return {
          activeUser: {
            type: Object
          }
        };
      }
    }
    customElements.define(UserDashboard.is, UserDashboard);
  </script>
</dom-module>

The parent acts as a simple data relay—when Element A updates activeUser, the parent’s property changes, and Element B’s UI automatically refreshes thanks to one-way binding.

3. Pub/Sub with iron-signals (Official Polymer Solution) #

Polymer’s iron-signals element is built specifically for cross-element communication without DOM structure dependencies. It uses a publish-subscribe pattern:

First, import the element (assuming you’ve installed it via your package manager):

<link rel="import" href="../iron-signals/iron-signals.html">

Then publish a signal from Element A:

<dom-module id="user-profile">
  <template>
    <iron-signals></iron-signals>
    <button on-click="_publishUpdate">Send Update to Dashboard</button>
  </template>
  <script>
    class UserProfile extends Polymer.Element {
      static get is() { return 'user-profile'; }
      
      _publishUpdate() {
        this.fire('iron-signal', {
          name: 'user-updated', // Unique signal name
          data: { name: 'Liam Reed', id: 789 }
        });
      }
    }
    customElements.define(UserProfile.is, UserProfile);
  </script>
</dom-module>

Subscribe to the signal in Element B:

<dom-module id="user-dashboard">
  <template>
    <iron-signals on-iron-signal-user-updated="_handleUserUpdate"></iron-signals>
    <p>Current User: [[displayName]]</p>
  </template>
  <script>
    class UserDashboard extends Polymer.Element {
      static get is() { return 'user-dashboard'; }
      static get properties() {
        return {
          displayName: {
            type: String,
            value: 'Guest'
          }
        };
      }
      
      _handleUserUpdate(event) {
        this.displayName = event.detail.data.name;
      }
    }
    customElements.define(UserDashboard.is, UserDashboard);
  </script>
</dom-module>

This is perfect for when siblings are in different parts of the DOM tree or you want to avoid tight coupling.

4. Direct DOM Query (Emergency Only!) #

If you need a quick fix for a simple scenario, you can query for the sibling element directly and call a method on it—but this is tightly coupled and breaks if your DOM structure changes. Use sparingly:

// In Element A
_sendDataToSibling() {
  const sibling = this.parentNode.querySelector('user-dashboard');
  if (sibling) {
    sibling.updateUser({ name: 'Zoe Patel', id: 101 });
  }
}

// In Element B
updateUser(userData) {
  this.displayName = userData.name;
}

Quick Recommendation #

Prioritize the shared state or common parent approaches first—they align with Polymer’s data-binding philosophy and keep your code maintainable. Use iron-signals for cross-DOM communication when needed.

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