Vue组件传值方法3：兄弟组件间传值

类似子类想父类传值，不过这个不管中间有多少个组件，都可是实现，不用再每个组件中设置属性或绑定$attrs；
实现思路是：用一个独立的Vue组件，点击某一组件注册事件，不过事件是注册在独立的做为中转的实力上，在需要接受值的组件中使用 $on调用事件名，设置回调函数，在函数中进行值的设定。
定义一个组件

let dus = new Vue();

传输组件

Vue.component('Eldest_son', {
        template: `<div style="width: 200px;height: 200px;border: 1px solid white;display: inline-block;float: left;color: cyan;">{{ name }}<input type="text" v-model="msg"><button @click="sond(msg)">sond</button></div>`,
        data() {
            return {
                name: 'Eldest son',
                msg:''
            }
        }, methods: {
            sond(v){
                dus.$emit('Pass',v);
                console.log(v);
            }
        }
    });

接收组件

Vue.component('Two_sons', {
        template: `<div style="width: 200px;height: 200px;border: 1px solid white;float: right;color: yellow;">
            {{ name }}<br><input type="text" class="ipt" ref="get">
            </div>`,
        data() {
            return {
                name: 'Two sons',
                value:''
            }
        }, methods: {

        },
        computed:{
            getValue(){
                return this.value
            }
        },
        mounted(){
            dus.$on('Pass',(v)=>{
                this.$refs.get.value = v;
                // this.$refs.get.value += v;
            })
        }
    });

它们的父组件：

let App = {
        data() {
            return {
                name: "App",
            }
        },
        template: `<div id="app">
            {{ name }}<hr>
            <Eldest_son></Eldest_son>
            <Two_sons></Two_sons>
            <p>想把信息从大儿子传向二儿子，不通过它们的父级</p>
        </div>`,
        methods: {}

    };