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

Question

我对聚合物很陌生，我开始学习它，就像谷歌开发人员一样，我使用了一门叫做聚合物3代码的课程。

我想从子组件：addContactClick()调用函数：side-menu。

为了做到这一点，我将函数作为一个参数传递。我已经在side-menu中定义了它，并使用on-click调用它。

start-polymer3.js:

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 {
      addContactClick: {
        type: Function,
      }
    };
  }

  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 addContactClick="addContactClick"></side-menu> 
        <content-area></content-area>
      </div>
    `;
  }
  addContactClick() {
    console.log('Button Clicked');
  }
}

customElements.define('start-polymer3', StartPolymer3);

​

side-menu.js:

​

import {
  PolymerElement,
  html
} from '@polymer/polymer';

export default class SideMenu extends PolymerElement {


  constructor() {
    super();
  }

  static get properties() {
    return {
      addContactClick: {
        type: Function
      },
    };
  }

  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);

​

当我执行它时，我得到以下错误：listener method addContactClick not defined handler @ template-stamp.js:92

Answer 1

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

start-polymer3.js

1. 删除属性addContactClick。
2. 修改后的addContactClick()函数定义
3. 在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

1. 将类型 of addContactClick从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