问 题
代码如下:
{{ total }}
Vue.component('button-counter', {
template: '{{ counter }}',
data: function () {
return {
counter: 0
};
}
});
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1;
}
}
});
为什么button-counter添加的click事件不能调用父元素的methods里面的方法呢?
解决方案
监听事件不能在组件上监听, 这样写不对, Vue 会渲染组件的模板(template),所以应该在模板上监听,template: '{{ counter }}'
监听完事件,调用的问题,子组件只能调用自己组件内定义的方法。你可以这么样写。
Vue.component('button-counter', {
template: '{{ counter }}',
data: function () {
return {
counter: 0
};
},
methods: {
incrementTotal: function() {
this.counter += 1
this.$parent.incrementTotal() // 调用父组件上的方法
// 如果调用根组件的方法,this.$root.incrementTotal()
}
}
});
扫一扫关注IT屋
微信公众号搜索 “ IT屋 ” ,选择关注与百万开发者在一起