Vue 2.0 中 $emit 和 $on 的使用详解
Vue 2.0 中 $emit 和 $on 是两个非常重要的概念，它们用于实现组件之间的通信。$emit 用于触发事件，而 $on 用于监听事件。
$emit
$emit 是 Vue 2.0 中用于触发事件的方法。它可以触发当前实例上的事件，并将参数传递给监听器回调函数。例如，在子组件中，我们可以使用 $emit 来触发事件，并将参数传递给父组件：
```
<template>
<div>
<span @click="select(0, $event)" :class="{'active': selectType===0}"></span>
<span @click="select(1, $event)" :class="{'active': selectType===1}"></span>
<span @click="select(2, $event)" :class="{'active': selectType===2}"></span>
</div>
</template>
<script>
export default {
data() {
return {
selectType: 0,
}
},
methods: {
select(type, event) {
this.selectType = type
this.$emit('select-type', type)
}
}
}
</script>
```
在上面的例子中，我们使用 $emit 来触发 'select-type' 事件，并将 type 参数传递给父组件。
$on
$on 是 Vue 2.0 中用于监听事件的方法。它可以监听当前实例上的事件，并将回调函数与事件关联起来。例如，在父组件中，我们可以使用 $on 来监听子组件触发的事件：
```
<template>
<ratingselect @select-type="onSelectType"></ratingselect>
</template>
<script>
export default {
data() {
return {
selectType: 0,
}
},
methods: {
onSelectType(type) {
this.selectType = type
}
}
}
</script>
```
在上面的例子中，我们使用 @select-type 语法糖来监听子组件触发的 'select-type' 事件，并将回调函数 onSelectType 与事件关联起来。
使用场景
$emit 和 $on 的使用场景非常广泛，例如：
* 父组件和子组件之间的通信
* 兄弟组件之间的通信
* 甚至是跨级组件之间的通信
$emit 和 $on 是 Vue 2.0 中非常重要的概念，它们使得组件之间的通信变得非常方便和灵活。
与 Vue 1.0 的差异
在 Vue 1.0 中，我们使用 vm.$dispatch 和 vm.$broadcast 来实现组件之间的通信。但是，这两个方法已经在 Vue 2.0 中被弃用，取而代之的是 $emit 和 $on。
$emit 和 $on 是 Vue 2.0 中非常重要的概念，它们使得组件之间的通信变得非常方便和灵活。
