<div id="app">
<div class="p-5">
<p>
{{` 外層num數值為: ${num}`}}
</p>
<button-counter
@parent-emit-name="addNum"
>
</button-counter>
</div>
</div>
const app = Vue.createApp({
data() {
return {
num: 0,
text: ''
};
},
methods: {
addNum() {
console.log('addNum');
this.num++
},
}
});
app.component('button-counter', {
methods: {
childEmitName(){
this.$emit('parentEmitName')
}
},
template: `<button type="button" @click="childEmitName">內層button-counter按鈕</button>`
});
app.mount('#app');