vue的$refs\$emit\$on\$once\$off的使用。

1.$refs的使用場景

父組件調用子組件的方法，能夠傳遞數據。

父組件：
<div id="app">
    <child-a ref="child"></child-a>
    <button @click="getMyEvent">點擊父組件</button>
<div>

<script>
    import ChildA from './child.vue'
    
    export default{
        components:{
            ChildA
        },
        data(){
            return {
                msg:'我是父組件的數據'
            }
        },
        methods:{
            getMyEvent(){
                //調用子組件的方法，child是上邊ref起的名字，emitEvent是子組件的方法。
                this.$refs.child.emitEvent(this.msg)
            }
        }
    }
</script>

子組件：
<template>
    <button>點擊我</button>
</template>
<script>
    export default{
        methods:{
            emitEvent(msg){
                console.log('接收的數據------'+msg)
            }
        }
    }
</script>

$emit的使用

子組件調用父組件的方法並傳遞數據。

子組件：
<template>
    <button @click="emitEvent">點擊我</button>
</template>
<script>
    export default{
        data(){
            return{
                msg:'我是子組件的數據'
            }
        },
        methods:{
            emitEvent(){
                //經過按鈕的點擊事件觸發方法，而後用$emit觸發一個my-event的自定義方法，傳遞this.msg數據。
                this.$emit('my-event',this.msg)
            }
        }
    }
</script>
父組件：
<template>    
    <div id="app">
        <child-a @my-event="getMyEvent"></child-a>
        //父組件經過監測my-event事件執行一個方法，而後取到子組件中傳遞過來的值。
    </div>
</template>
<script>
    import childA from './child.vue';
    export default {
        components:{
            childA
        },
        methods:{
            getMyEvent(msg){
             console.log('接收數據---'+msg);
             //接收數據，我是子組件的數據
            }
        }
    }
</script>

3.$on的使用場景

兄弟組件之間相互傳遞數據。
首先建立一個Vue的空白實例（兄弟組件的橋樑）

import Vue from 'vue';
export default new Vue();

子組件A:發送放使用$emit自定義事件把數據帶過去。

<template>
    <div>
        <span>A組件-{{msg}}</span>
        <input type="button" value="把A組件數據傳遞給B" @click="send">
    </div>
</template>
<script>
    import eventBus from './eventBus';
    export default{
        data(){
            return{
                msg:{
                    a:'111',
                    b:'222'
                }
            }
        },
        methods:{
            send(){
                eventBus.$emit('aevent',this.msg)
            }
        }
    }
</script>

子組件B:接收方經過$on監聽自定義事件的callback接收數據

<template>
    <div>
        <span>B組件，A傳的數據爲--{{msg}}</span>
    </div>
</template>
<script>
    import eventBus from './eventBus.vue'
    export default {
        data(){
            return{
                msg:''
            }
        },
        mounted(){
            eventBus.$on('aevent',(val)=>{//監聽事件aevent，回調函數要使用箭頭函數。
                console.log(val);//打印結果；我是a組件的數據。
            })
        }
    }
</script>

父組件：

<template>    
    <div>
        <childa></childa>
        <br/>
        <childb></childb>
    </div>
</template>
<script>
    import childa from './childa.vue';
    import childb from './childb.vue';
    export default{
        componets:{
            childa,
            childb
        },
        data(){
            return{
                msg:''
            }
        }
    }
</script>