vue——15-vue中的触发事件 this.$emit( 事件名 )
<div id="enjoy"><!--使用$on(eventName)监听事件使用$emit(eventName)触发事件--><my-bt
·
<div id="enjoy">
<!--
使用$on(eventName)监听事件
使用$emit(eventName)触发事件
-->
<my-btn @total="allcount()"></my-btn>
<my-btn @total="allcount()"></my-btn>
<my-btn @total="allcount()"></my-btn>
<p>所有按钮一共点击了{{num}}次</p>
</div>
<template id="my_btn">
<button @click="total()">点击了{{counter}}次</button>
</template>
{
//实例化
Vue.component('my-btn', {
template: '#my_btn',
data() {
return {
counter: 0
}
},
methods: {
total() {
this.counter += 1;
//通知外界调用了这个方法
this.$emit('total');
}
}
});
new Vue({
el: '#enjoy',
data: {
num: 0
},
methods: {
allcount() {
this.num += 1;
}
}
})
}
更多推荐
已为社区贡献19条内容
所有评论(0)