javascript - 将功能作为参数传递给子组分 polymer 3

我是Polymer的新手，开始使用名为Polymer 3-代码的类(class)来学习它，就像Google开发人员一样。

我想从子组件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 definedhandler @ template-stamp.js:92

最佳答案

这是您应该尝试的更改。

start-polymer3.js

删除了属性addContactClick。

更改了addContactClick()函数

的定义

在side-menu元素中传递了我们自己的函数的同时，添加了绑定(bind)功能，而不仅仅是函数名称。

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的类型从函数更改为字符串。

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

关于javascript - 将功能作为参数传递给子组分 polymer 3，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51606711/