vue非父子组件传值

1.单独的事件中心管理组件间的通信

var eventHub = new Vue()

2.监听事件与销毁事件

eventHub.$on('add-todo',addTodo) eventHub.$off('add-todo')

举例： （1）事件中心（js文件）

import Vue from 'vue' const hub = new Vue() export default hub

（2）组件A

<template> <div> {{value2}} </div> </template> <script> import hub from '@/assets/js/broadcast' export default { name: 'brother', data () { return { value2: '123' } }, mounted () { hub.$on('tom-event', (val) => { this.value2 = val }) } } </script>

（3）组件B

<template> <div> <el-button @click="add">点击</el-button> </div> </template> <script> import hub from '@/assets/js/broadcast' export default { name: 'test', methods: { add () { hub.$emit('tom-event', '1234567') }, } </script>