众所周知，父子组件可通过属性传值

1. 父子组件 父-子 props 子-父 parent $child
2. 使用场景最多vuex
3. bus
4. slot分发数据，不常用

非父子组件传值方法

本文使用的是Bus/总线/发布者模式/观察者模式

1. 事件：兄弟组件通过点击事件实现彼此传值

2. 主要使用.$emit()和.$on()以及生命周期函数mounted

$on官网说明

Vue生命周期函数

/* HTML代码段 */
<div id="app">
        <child conter='zz'> </child>/* 兄弟组件通过点击事件的传值 */
        <child conter='jj'> </child>
    </div>

/* JS代码段 */
Vue.prototype.bus = new Vue()
    Vue.component('child', {
        data: function() {
            return {
                selfconter: this.conter
                /* 不允许直接修改父组件传输的参数，克隆数据，单向数据流 */
            }
        },
        props: ['conter'],
        template: `<div @click = 'clickDiv'>{{selfconter}}</div>`,
        methods: {
            clickDiv: function() {
                this.bus.$emit('change', this.selfconter)
                /* 子组件向外触发事件*/
            }
        },
        mounted:function(){/* 生命周期函数指定事件， */
            this.bus.$on('change',(msg)=> {/* $on监听自定义事件 */
                this.selfconter=msg
                
            })
        }
    })
    var vm = new Vue({
        el: '#app',
    })

跨行初学者，如有错误遗漏，请君不吝赐教