[英]Passing Parent Function to Child Component in VueJS
I'm having my practice in VueJS 1.0 and I am learning about Components. 我正在VueJS 1.0中练习,而且我正在学习组件。 in this
example
, there is an input
element and has to supply coupon
or some kind of a code
from an API. 在这个
example
,有一个input
元素,并且必须从API提供coupon
或某种code
。 and I have to validate. 我必须验证。 I have my
<coupon >
component and has props of when-applied
. 我有我的
<coupon >
组件,并且具有when-applied
道具。 The when-applied
must call the parent function setCoupon
but it won't. when-applied
必须调用父函数setCoupon
但不会。
I only got this error this.whenApplied is not a function
. 我只得到这个错误。当
this.whenApplied is not a function
。
<div id="demo" class="list-group">
<script id="coupon-template" type="x-template">
<input type="text" v-model="coupon" v-on:blur="whenCouponHasBeenEntered">
<div v-text="text"></div>
</script>
<coupon when-applied="setCoupon"></coupon>
</div>
Here is my app.js
file 这是我的
app.js
文件
Vue.component('coupon', {
template: '#coupon-template',
props: ['whenApplied'],
data: function() {
return {
coupon: '',
invalid: false,
text: ''
}
},
methods: {
whenCouponHasBeenEntered: function() {
this.validate();
},
validate: function() {
if( this.coupon == 'FOOBAR') {
this.whenApplied(this.coupon);
return this.text = '20% OFF!!';
}
return this.text = 'that coupon doesn`t exists';
}
}
});
new Vue({
el: '#demo',
methods: {
setCoupon: function(coupon) {
alert('set coupon'+ coupon);
}
}
});
Someone pls help. 有人帮忙。 Suggestions pretty much appreciated.
建议非常感谢。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.