将函数作为参数传递给子组分聚合物3

1 回答

• 1

  以下是您应该做的更改并尝试 .

  start-polymer3.js

  • 删除了属性 addContactClick .

  • 更改了 addContactClick() 函数的定义

  • 添加了Binding而不仅仅是函数名称，同时在 side-menu 元素中传递了我们自己的函数 .

  import {
    PolymerElement,
    html
  } from '@polymer/polymer';
  import SideMenu from './side-menu.js'
  import ContentArea from './content-area.js'
  
  class StartPolymer3 extends PolymerElement {
    static get properties() {
      return {
        
      };
    }
  
    constructor() {
      super();
      // this.addContactClick = this.addContactClick.bind(this);
    }
  
    static get template() {
      return html `
        <style>
          .main-page {
            display: grid;
            grid-template-columns: 250px 1fr;
          }
        </style>
        <div class="main-page">
          <side-menu add-contact-click="[[addContactClick()]]"></side-menu> 
          <content-area></content-area>
        </div>
      `;
    }
    addContactClick() {
      return function() {console.log('Button Clicked')};
    }
  }
  
  customElements.define('start-polymer3', StartPolymer3);
  

  side-menu.js

  • 将 addContactClick 的 type 从 Function 更改为 String .

  import {
    PolymerElement,
    html
  } from '@polymer/polymer';
  
  export default class SideMenu extends PolymerElement {
  
  
    constructor() {
      super();
    }
  
    static get properties() {
      return {
        addContactClick: {
          type: String
        },
      };
    }
  
    static get template() {
      return html `
        <style>
          #side-menu {
              background: #323759;
              height: 100vh;
              padding: 50px 25px;
          }
          .logo {
              text-align: center;
          }
          .logo img {
              width: 50px;
          }
          .title {
              color: #ccced7;
              font-weight: 700;
              margin: 1rem 0;
          }
          #side-menu nav a {
              color: #ccced7;
              text-decoration: none;
              text-transform: capitalize;
              display: block;
              padding: 10px 10px 10px 0;
          }
          #side-menu nav a span.icon{
              padding: 10px 10px 10px 0;
          }
          
          
        </style>
          <section id="side-menu"> 
            <div class="logo">
              <img src="https://www.dexterousgroup.com.au/wp-content/uploads/2018/03/google-logo-icon-PNG-Transparent-Background.png">
            </div>
            <div class="menu">
              <div class="title">Contacts</div>
              <nav>
                <a href="#" on-click="addContactClick"><span class="icon"> + </span>Add Contacts</a>
              </nav>
            </div>
          </section>
      `;
    }
  
  }
  
  customElements.define('side-menu', SideMenu);
  

  如果仍然存在，请告诉我一个问题 .

  这是您可以访问的另一个链接，其中包含类似问题：

  Passing a function as an attribute value

  回复于 2024-05-05T04:01:47+08:00