来自书籍《vue.js实战》
子组件使用$emit()触发事件,父组件用v-on来监听子组件事件
$emit('自定义事件名',传给父组件的数据)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
</head>
<body>
<div id="app">
<p>总数:{{total}}</p>
<my-component @increase1="handleGetTotal" @reduce="handleGetTotal"></my-component>
</div>
<script>
Vue.component('my-component',{
template:'\
<div>\
<button @click="handleIncrease">+1</button>\
<button @click="handleReduce">-1</button>\
</div>',
data:function(){
return {
counter:0
}
},
methods:{
handleIncrease:function(){
this.counter++;
this.$emit('increase1',this.counter);
},
handleReduce:function(){
this.counter--;
this.$emit('reduce',this.counter);
}
}
}
);
var v=new Vue({
el:"#app",
data:{
total:0
},
methods:{
handleGetTotal:function(total){
this.total=total
}
}
});
</script>
</body>
</html>