<!-- 受限於codepen環境關係,vue warning無法使用
console觀看-->
<div id="app">
<div class="p-5">
<h3>驗證資料內容</h3>
{{num}}
<button-counter2 @add="addNum"></button-counter2>
</div>
</div>
const app = Vue.createApp({
data() {
return {
num: 0,
};
},
methods: {
addNum(num) {
this.num = this.num + num;
},
}
});
app.component('button-counter2', {
emits: {
add:(num)=>{
if(typeof num !== 'number'){
console.warn('add事件所傳出的參數型別需為 number')
}
return typeof num === 'number'
}
},
template: `
<button type="button" @click="$emit('add', '1')">Emit 驗證是否為數值</button>
`,
})
app.mount('#app');