Polymer Starter Kit：如何从视图操作主应用页面的元素？

这个问题我之前也碰到过，核心原因是子组件没法直接拿到父组件里的元素，this.$只能访问当前组件模板内的节点～给你两种靠谱的实现方法：

这是组件间通信最常用的方式，子组件触发事件，父组件监听并执行操作：

1. 在视图组件（比如my-view1）中触发自定义事件

<!-- my-view1.html -->
<dom-module id="my-view1">
  <template>
    <button on-click="handleShowDiv">显示主页面的隐藏div</button>
  </template>
  <script>
    class MyView1 extends Polymer.Element {
      static get is() { return 'my-view1'; }
      
      handleShowDiv() {
        // 触发冒泡事件，让父组件能监听到
        this.dispatchEvent(new CustomEvent('show-hidden-div', {
          bubbles: true,
          composed: true
        }));
      }
    }
    customElements.define(MyView1.is, MyView1);
  </script>
</dom-module>

2. 在my-app中监听事件并修改div显示状态

<!-- my-app.html -->
<dom-module id="my-app">
  <template>
    <!-- 你的隐藏div -->
    <div id="hiddenDiv" style="display: none;">这是要显示的内容</div>
    
    <!-- 其他原有代码（路由、页面容器等） -->
    <app-main>
      <iron-pages selected="[[page]]" attr-for-selected="name">
        <my-view1 name="view1"></my-view1>
        <!-- 其他视图组件 -->
      </iron-pages>
    </app-main>
  </template>
  <script>
    class MyApp extends Polymer.Element {
      static get is() { return 'my-app'; }
      
      connectedCallback() {
        super.connectedCallback();
        // 监听子组件触发的事件
        this.addEventListener('show-hidden-div', this._showHiddenDiv.bind(this));
      }
      
      _showHiddenDiv() {
        // 这里就能正常访问到当前组件内的hiddenDiv了
        this.$.hiddenDiv.style.display = 'block';
      }
    }
    customElements.define(MyApp.is, MyApp);
  </script>
</dom-module>

如果你觉得事件方式有点繁琐，也可以用属性绑定的方式，通过修改共享属性来控制显示：

1. 在my-app中定义控制显示的属性，并绑定到视图组件

<!-- my-app.html -->
<dom-module id="my-app">
  <template>
    <!-- 用属性来控制display样式 -->
    <div id="hiddenDiv" style$="display: [[showHiddenDiv ? 'block' : 'none']]">这是要显示的内容</div>
    
    <!-- 把属性双向绑定到视图组件 -->
    <app-main>
      <iron-pages selected="[[page]]" attr-for-selected="name">
        <my-view1 name="view1" show-hidden-div="{{showHiddenDiv}}"></my-view1>
        <!-- 其他视图组件 -->
      </iron-pages>
    </app-main>
  </template>
  <script>
    class MyApp extends Polymer.Element {
      static get is() { return 'my-app'; }
      
      static get properties() {
        return {
          showHiddenDiv: {
            type: Boolean,
            value: false
          }
        };
      }
    }
    customElements.define(MyApp.is, MyApp);
  </script>
</dom-module>

2. 在视图组件中修改绑定的属性

<!-- my-view1.html -->
<dom-module id="my-view1">
  <template>
    <button on-click="handleShowDiv">显示主页面的隐藏div</button>
  </template>
  <script>
    class MyView1 extends Polymer.Element {
      static get is() { return 'my-view1'; }
      
      static get properties() {
        return {
          // 开启notify，让属性变化能传递回父组件
          showHiddenDiv: {
            type: Boolean,
            notify: true
          }
        };
      }
      
      handleShowDiv() {
        this.showHiddenDiv = true;
      }
    }
    customElements.define(MyView1.is, MyView1);
  </script>
</dom-module>

简单总结下：this.$.elementId只能访问当前组件模板里的元素，跨组件就得用事件或者属性绑定来通信～

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