Vue自定义事件，将值从子组件传到外界，通过$emit
<body>
<div id="app">
<my_div @total="totalCounter()"></my_div>
<my_div @total="totalCounter()"></my_div>
<my_div @total="totalCounter()"></my_div>
<my_div @total="totalCounter()"></my_div>
<my_div @total="totalCounter()"></my_div>
<my_div @total="totalCounter()"></my_div>
<my_div @total="totalCounter()"></my_div>
<p>一共点击了{{totalcount}}次</p>
</div>
<template id="mydiv">
<button @click="total">点击了{{count}}次</button>
</template>
</body>
<script src="../js/vue.js"></script>
<script>
Vue.component("my_div" , {
template:"#mydiv",
data () {
return {
count:0
}
},
methods: {
total(){
this.count+=1;
//告诉外界调用了total方法
this.$emit("total");
}
}
});
new Vue({
el:"#app",
data:{
totalcount:0
},
methods: {
totalCounter(){
this.totalcount+=1;
}
}
})
</script>
