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>
 

2.$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的使用場景

兄弟元件之間相互傳遞資料。

資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

首先建立一個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>