<div id="app">
<h2>透過 emit 向外傳遞資訊</h2>
我透過元件儲值了 {{ cash }} 元
<button @click="incrementTotal" class="btn btn-primary">click</button>
<button-counter @increment="incrementTotal"></button-counter>
<hr>
<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", Number(this.counter));
}
}
});
var app = new Vue({
el: "#app",
data: {
cash: 300
},
methods: {
incrementTotal(newNumber) {
this.cash = this.cash + newNumber;
}
}
});
