vue中$refs、$emit、$on的使用场景

转载自 骚φ(゜▽゜*)♪白
1、$emit的使用场景
子组件调用父组件的方法并传递数据
注意：子组件标签中的时间也不区分大小写要用“-”隔开
子组件：

<template>
	<button @click="emitEvent"> click me </button>	
</template>
<script>
	export default {
		data () {
			return {
				msg: ‘子组件数据’
			}
		},
		methods: {
			emitEvent () {
				this.$emit("child-event", this.msg)
			}
		}
	}
</script>

父组件：

<template>
	<div id="#app">
		<child @child-event="getMyEvent"></child>
		 <!--父组件中通过监测child-event事件执行一个方法，然后取到子组件中传递过来的值-->
	</div>
</template>
<script>
	import Child from "./components/child.vue"
	export default {
		components: {
			Child
		},
		methods: {
			getMyEvent () {
				console.log('接收的子组件数据' + msg)
			}
		}
	}
</script>

2、$refs的使用场景
父组件调用子组件的方法，可以传递数据
注意：子组件标签中的时间也不区分大小写要用“-”隔开
父组件：

<template>
	<div id="#app">
		<child ref="child"></child>
		<button @click="getMyEvent"> 点击父组件 </button>
	</div>
</template>
<script>
	import Child from "./components/child.vue"
	export default {
		components: {
			Child
		},
		data () {
			return {
				msg: '父组件的message'
			}
		},
		methods: {
			getMyEvent () {
				this.$refs.child.childEvent(this.msg)
				//调用子组件的方法，child是上边ref起的名字，emitEvent是子组件的方法
			}
		}
	}
</.script>

子组件：

<template>
	<button></button>
</template>
<script>
	export default {
		methods: {
			childEvent (msg) {
				console.log('父组件中的数据' + msg)
			}
		}
	}
</script>

3、$on的使用场景
兄弟组件之间相互传递数据
首先创建一个vue的空白实例（兄弟间的桥梁）

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

子组件 childa emptyVue.vue
发送方使用 $emit 自定义事件把数据带过去

<template>
	<div>
		<span> {{ msg }} </span>
		<input type="button" value="把a的组件数据传给b" @click="send">
	</div>
</template>
<script>
	import vmson from "../../../util/emptyVue"
	export default {
		data () {
			return {
				msg: {
					a: '111',
					b: '222'
				}
			}
		},
		methods: {
			send () {
				vmson.$emit("a-event",this.msg)
			}
		}
	}
</script>

子组件 childb
而接收方通过 $on监听自定义事件的callback接收数据

<template>
	<div>
		<span> 接收的A组件的数据 {{ msg }} </span>
	</div>
</template>
<script>
	import vmson from "../../../util/emptyVue"
	export default {
		data () {
			return {
				msg: ''
			}
		},
		mouted () {
			vmson.$on("a-event",(val) => {//监听事件aevent，回调函数要使用箭头函数;
				console.log(val) /打印结果：我是a组件的数据
				this.msg = val
			})
		}
	}
</script>

父组件：

<template>
	<div>
		<child-a></child-a>
		<br >
		<child-b></child-b>
	</div>
</template>
<script>
	import ChildA from './childa.vue'
	import ChildB from './childb.vue'
	exprot default {
		components: {
			ChildA,
			ChildB
		}
	}
</script>