vue非父子通信（兄弟之间通信）-蒲公英云

vue非父子通信（兄弟之间通信）

青旅半醒 2023-02-19 04:26 39阅读 0赞

ps：昨天写了父子之间的通信，忘记了可以去看以下小例子哟

要点

兄弟1：通过鼠标点击事件传值：vm.$emit('事件名',value)
兄弟2：接受值：注意在mounted()中执行：vm.$on('事件名',callback)
vm是兄弟1和兄弟2的公共部分，可以是main.js,也可以自定义一个，要点代码是：export var bus= new Vue();
直接上代码：

main.js

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
export var bus = new Vue();
 new Vue({ 
  render: h => h(App),
}).$mount('#app')

兄弟1：Brother1.vue

<template>
    <div id="b1">
        兄弟1
        <span>{ { eleValue}}</span>
        <input type="button" @click="elementByValue" value="按钮1">
    </div>
</template>
<script>
    import { bus} from '../main.js'
    export default{ 
        name:'b1',
        data(){ 
            return { 
                eleValue:3
            }
        },
        methods:{ 
            elementByValue:function(){ 
                console.log(this.eleValue)
                bus.$emit('val',this.eleValue)
            }
        }
    }
</script>
<style>
</style>

兄弟2：Bother2.vue

<template>
    <div id="b2">
        兄弟2
        <input type="button" @click="getData" value="按钮2">
        <span>{ { name}}</span>
    </div>
</template>
<script>
    import { bus} from '../main.js'
    export default { 
        name: 'b2',
        data: function() { 
            return { 
                name: 0
            }
        },
        mounted() { 
            var _this = this;
            bus.$on('val', (data) => { 
                console.log(data);
                _this.name = data;
                _this.$forceUpdate()
            })
        },
        methods: { 
            getData: function() { 
                console.log(this)
                this.name++;
            }
        }
    }
</script>
<style>
</style>