<div id="app">
<h2>透過 emit 向外傳遞資訊</h2>
我透過元件儲值了 {{ cash }} 元
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
Vue.component('button-counter',{
template:`<div>
<button @click="incrementCounter" class="btn btn-primary">增加{{counter}}</button>
<input type="number" class="form-control mt-2" v-model="counter">
</div>`,
data:function(){
return{
counter:0
}
},
methods:{
incrementCounter:function(){
this.$emit('increment', Number(this.counter));
}
}
})
var app = new Vue({
el:'#app',
data:{
cash:300
},
methods:{
incrementTotal: function(newNumber){
this.cash = this.cash + newNumber;
}
}
})