# Emits驗證 (4-6)
###### tags: `Vue`、`4. 元件`
2022.3.4

  可以驗證傳遞資料是否符合預期。
### 1. 解決錯誤訊息
  當元件內部變數變化時，沒有渲染到畫面，會出現不影響結果的錯誤訊息，為了美觀可以用以下方法解決。
解決方法：設立`emits:['']`

{{ tmp }}
<oldmoon @emit_data="push_data"></oldmoon>

<script>
const app = Vue.createApp({
    data(){
        return{
            tmp:''
        }
    },
    methods:{
        push_data(data){
            this.tmp = data
    }
}});

app.component('oldmoon',{
    data(){
        return{
            num:0
        }   
    },
    emits : ['emit_data'],
    template:`
    <button type="button" @click="num++">增加數值</button>
    <button type="button" @click="$emit('emit_data',num)">推送資料</button>`
})

app.mount('#app')

</script>

### 2. 驗證傳遞變數型態（範例：判斷傳遞變數是否為數值）

{{ tmp }}
<oldmoon @emit_data="push_data"></oldmoon>

<script>
const app = Vue.createApp({
    data(){
        return{
            tmp:''
        }
    },
    methods:{
        push_data(data){
            this.tmp = data
    }
}});

app.component('oldmoon',{
    emits:{
        emit_data:(num)=>{
            if(typeof num != "number"){
                console.warn(`請輸入數值` ) //警告訊息
            }
            return typeof num
        }
    },
    template:`
    <button type="button" @click="$emit('emit_data','1')">推送資料</button>`
})

app.mount('#app')

</script>