版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
<body>
<div id="app">
<counter :num="count" @incr="add" @decr="reduce"></counter>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const counter={
template:
`<div>
<button @click="handleAdd">+</button>
<button @click="handleReduce">-</button>
<h1>{{num}}</h1>
</div>`
,
props:['num'],
methods:{
handleAdd(){
this.$emit('incr')
},
handleReduce(){
this.$emit('decr');
}
}
}
const app=new Vue({
el:"#app",
data:{
count:0
},
components:{
counter
},
methods:{
add(){
this.count++;
},
reduce(){
this.count--;
}
}
});
</script>
</body>