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