问 题
代码如下：
{{ 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屋 ” ，选择关注与百万开发者在一起
3167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
