关于$on的用法

$on 兄弟组件之间相互传递数据

示例

父组件 $onFa.vue

<template>
     <div>
       <div>兄弟组件之间相互传递数据</div>
      <onChA></onChA>
      <br/>
      <onChB></onChB>
     </div>
</template>
<script>
import onChA from './$onChA'
import onChB from './$onChB'
export default {
  components: {
    onChA,
    onChB
  },
  data () {
    return {
      msg: ''
    }
  }
}
</script>

创建一个vue的空白实例 emptyVue.js（兄弟间的桥梁）

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

子组件（A） onChA.vue

<template>
    <div>
        <h1>A组件：{{msg}}</h1>
        <br>
        <br>
        <input type="button" value="把A组件数据传给B组件" @click ="send">
    </div>
</template>
<script>
import emptyVue from '../utils/emptyVue.js' // vue的空白实例（兄弟间的桥梁）
export default {
  data () {
    return {
      msg: 'A组件数据'
    }
  },
  methods: {
    send: function () {
      emptyVue.$emit('aevent', this.msg) // 使用 $emit 自定义事件把数据带过去
    }
  }
}
</script>

子组件（B） onChB.vue

<template>
 <div>
    <h1>B组件：{{msg}}</h1>
 </div>
</template>
<script>
import emptyVue from '../utils/emptyVue.js' // vue的空白实例（兄弟间的桥梁）
export default {
  data () {
    return {
      msg: '无'
    }
  },
  mounted () {
    emptyVue.$on('aevent', (val) => { // 监听事件aevent，回调函数要使用箭头函数;
      console.log(val)
      this.msg = val
    })
  }
}
</script>

路由

import Vue from 'vue'
import Router from 'vue-router'
import OnFa from '@/components/$onFa'// 父组件
import OnChA from '@/components/$onChA' // 子组件A
import OnChB from '@/components/$onChB' // 子组件B

Vue.use(Router)

export default new Router({
 // mode: 'history',       // 更改模式，去掉地址栏的 #
 routes: [
   {
     path: '/',
     name: 'OnFa',
     component: OnFa,
     children: [{
       path: 'OnChA',
       name: 'OnChA',
       component: OnChA
     },
     {
       path: 'OnChB',
       name: 'OnChB',
       component: OnChB
     }
     ]
   }
 ]
})