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

Question

我是Polymer的新手，开始使用名为Polymer 3的课程来学习它-代码类似于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 defined handler @ template-stamp.js:92

Answer 1

这是您应该尝试的更改。

start-polymer3.js

1. 已删除属性addContactClick。
2. 更改了addContactClick()函数的定义
3. 在side-menu元素中传递我们自己的函数时，添加了Binding而不只是函数名称。

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. 将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