vue非父子组件传值，中央总线模式

雨落风殇

于 2018-05-22 11:24:51 发布

阅读量401

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/a15180180753/article/details/80403266

版权

vue 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的简单示例，展示了如何通过全局事件总线的方式在不同组件之间进行通信。具体包括如何创建一个全局的bus实例，以及如何在组件中利用这个实例来发送和接收数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<template>
    <div id='footer'>
        <h1>this is footer</h1>
        <button @click='sendMessage'>给header传值</button>
    </div>
    
</template>
<script>
    import bus from '../bus'
    export default{
        data(){
            return {
                msg:'this is footer message'
            }
        },
        methods:{
            sendMessage(){
                bus.$emit('getMessage',this.msg);
            }
        }
    }
</script>

<template>
    <div id='header'>
        <h1>this is header</h1>
        <h1>{{msg}}</h1>
    </div>
</template>
<script>
    import bus from '../bus'
    export default{
        data(){
            return {
                msg:''
            }
        },
        mounted(){
            bus.$on('getMessage',data=>{
                this.msg=data;
            })
        }
    }
</script>