<!-- 受限於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');
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.global.prod.min.js