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>