本文介绍了Vue.js2.0中父子组件的交互方法，包括父组件如何触发子组件的方法，子组件如何通过$emit向父组件传递参数，以及v-ref的使用。同时，讲解了Vue2.0组件间数据传递的方式，如props单向数据流、$on/$emit事件监听和触发、$dispatch/$broadcast事件派发和广播。最后，讨论了非父子组件间的通信，利用eventHub作为事件中转站实现组件间的通信。
之前关于vue.js2.0父组件的一点学习，最近需要回顾，就顺便发到随笔上了
{ { total }}
Vue.component('button-counter', {
template: '{ { counter }}',
data: function () {
return {
counter: 0
}
},
methods: {
increment: function () {
this.counter += 1
this.$emit('ee', 'cc' )
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 'arg'
},
methods: {
incrementTotal: function (b) {
this.total = b + '1';
}
}
})
子组件通过$emit触发父组件的事件，$emit后面的参数是向父组件传参，注意，父组件的事件处理函数直接写函数名即可，不要加(),参数直接传递到了父组件的methods的事件处理函数了。
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
