# Emit 向外層傳遞事件 (4-5)
###### tags: `Vue`、`4. 元件`
2022.3.4
* 先定義外層接收方法
* 定義內層的 $emit 觸發方法
* 使用 v-on 的方式觸發外層方法 (口訣：前內、後外)
* 命名規則跟props一樣，component變數小駝峰(例：imgUrl)，HTML就要改為'-'形式 (例:img-url)。

### 1. 元件與外層，動作連動(傳遞事件)

{{ num }}
<oldmoon @emit_num="addnum"></oldmoon>

<script>
    const app = Vue.createApp({
        data(){
            return{
                num:0
            }
        },
        methods:{
            addnum(){
                this.num+=1;
            }
        }
    });
    
    app.component('oldmoon',{
        methods:{
            click(){
                console.log('元件觸發');
                this.$emit('emit_num');
            }
        },
        template:`<button type="button" @click="click">增加</button>`
    })
    
    app.mount('#app');
</script>

### 2. 元件與外層，動作連動(元件向外傳遞資料)

{{ text }}
<oldmoon @emit_text="change_text"></oldmoon>

<script>
    const app = Vue.createApp({
        data(){
            return{
                text:'這是外層'
            }
        },
        methods:{
            change_text(text){
                this.text= text;
            }
        }
    });
    
    app.component('oldmoon',{
        data(){
            return{
                text:'這是元件'
            }
        },      
        template:`<button type="button" @click="$emit('emit_text',this.text)" >增加元件數值</button>`
    })
    
    app.mount('#app');
</script>