Vue组件之间数据共享浅析

import Vue from 'vue'
// 向外共享 Vue 的实例对象
export default new Vue()

<template>
    <div class="left-container">
        <h3>Left组件--{{count}}</h3>
        <button @click="send">点击给Right发送数据</button>
    </div>
</template>
<script>
    // 1.导入 eventBus.js 模块
    import bus from './eventBus' 
    export default{
        data(){
            return {
                // 兄弟组件要传送的数据
                str:'我想对你说：hello world'
            }
        },
        methods:{
            send(){
                // 2.通过eventBus来发送数据
                bus.$emit('share',this.str)
            }
        }
    }
</script>
<style lang="less" scoped>
    h3{
        color: #f00;
    }
    .left-container{
        padding: 0 20px 20px;
        background-color: orange;
        min-height: 250px;
        flex: 1;
    }
    ::v-deep h5{
        color:#00f
    }
</style>

<template>
    <div class="right-container">
        <h3>Right组件</h3>
        {{msgFromLeft}}
    </div>
</template>
<script>
    // 1.导入 eventBus.js 模块
    import bus from './eventBus'
    export default{
        data(){
            return {
                // 兄弟组件要接受的数据
                msgFromLeft:""
            }
        },
        created(){
            bus.$on('share',val=>{
                this.msgFromLeft = val
                // console.log('在Right组件中定义的share被触发了！',val);
            })
        }
    }
</script>
<style>
    .right-container{
        padding: 0 20px 20px;
        background-color: orange;
        min-height: 250px;
        flex: 1;
    }
</style>