vm.$on and vm.$emit（父子组件的通信）

注意：祖孙之间的通信不适用此方法

vm.$on && vm.$emit

代码演示

//父组件
<template>
  <ratingselect @select-type="onSelectType"></ratingselect>
</template>
<script>
  data () {
   return {
    selectType: 0,
  },
  methods: {
   // 接收事件，接收type
   onSelectType (type) {
    this.selectType = type
   }
  }
</script>

父组件使用@select-type="onSelectType"，@就是v-on的简写,监听由子组件vm.$emit触发的事件，通过style="color:red">onSelectType()事件,接受从子组件传递过来的数据，通知父组件数据改变了。

// 子组件
<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>
  data () {
   return {
    selectType: 0,
  },
  methods: {
    select (type, event) {
      this.selectType = type
      // 触发事件，传递数据type
      this.$emit('select-type', type)
   }
  }
</script>

子组件通过$emit来触发事件，将参数传递出去

参考链接：demo来源脚本之家