4

我是 Polymer 的新手，并开始使用名为 Polymer 3 - Code like a Google developer 的课程来学习它。

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

为此，我将函数作为参数传递。我在 中定义了它side-menu并使用它调用它on-click

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

侧面菜单.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

4

1 回答 1

1

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

开始-polymer3.js

  1. 删除了属性addContactClick。
  2. 改变了addContactClick()功能的定义
  3. 添加 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);

侧边菜单.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);

如果仍然存在，您有问题请告诉我。

这是您可以访问的另一个链接，用于类似的问题：

将函数作为属性值传递

于 2018-07-31T11:13:00.593 回答