直接上代码
<body>
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:ee="incrementTotal"></button-counter>
<button-counter v-on:ee="incrementTotal"></button-counter>
</div> <script>
Vue.component('button-counter', {
template: '<button v-on:click="increment">{{ counter }}</button>',
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';
}
}
})
</script>
</body>
子组件通过$emit触发父组件的事件，$emit后面的参数是向父组件传参，注意，父组件的事件处理函数直接写函数名即可，不要加(),参数直接传递到了父组件的methods的事件处理函数了。
结果
点击几次后变成
另外，写一个小拾遗。vue子组件用了定义模板组件功能，然后在父组件里定义一个HTML元素绑定这个子组件后才能在父组件通过这个HTML元素使用。
再说一个非常方便的v-ref
<body>
<div id="parent">
<user-profile v-ref:profile></user-profile>
</div> <script>
Vue.component('user-profile', {
template: '<span>{{ msg }}</span>',
data: function () {
return {msg: 123};
},
methods: {
greet: function () {
console.log('hhhhh');
}
} })
var parent = new Vue({el: '#parent'});
var child = parent.$refs.profile;
child.greet();
</script>
</body>