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>