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

Question

我是Polymer的新手，像谷歌开发人员一样，通过一门名为Polymer 3-Code的课程开始学习。

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

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

start-popolymer3.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

Answer 1

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

启动聚合3.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的类型从函数更改为字符串

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

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

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

将函数作为属性值传递