Vue Element UI 之同级/兄弟组件间传值（sessionStorage，eventBus，同一父组件）

扩展连接
父子组件间传值：https://blog.csdn.net/qq_41956139/article/details/104260473
发布者-订阅者模式：https://blog.csdn.net/qq_41956139/article/details/104296945

方式一、通过sessionStorage

优点：无需通过任何事务触发；随时随地获取，不受组件间关系限制

// 存入，在A.vue
window.sessionStorage.setItem('currentID', this.currentID)
// 取出，在B.vue
this.id = window.sessionStorage.getItem('currentID')

方式二、通过eventBus

转自：https://blog.csdn.net/lhb215215/article/details/82966300

注意：需要通过 click 事件触发

接下来的示例中，ParentCard组件包含了SisterCard和BrotherCard两个子组件，而且这两个子组件是兄弟组件。

首先在main.js文件中定义一个新的eventBus对象，其实他是一个全新的Vue实例：export const eventBus = new Vue()

// main.js
import Vue from 'vue'
import App from './App'
 
export const eventBus = new Vue()
 
new Vue({
    el: '#app',
    render: h => h(App)
})

接着在新创建的BrotherCard组件中：

// BrotherCard.vue
<template>
	<button @click="messageSister">给妹妹发消息</button> 
</template>
<script>
	// 1.导入eventBus
    import { eventBus } from '../main'
    export default {
    	// 2.在methods中写$emit
	    methods: {
	    	// 注意，此方法需要click事件触发
		    messageSister() {
		        eventBus.$emit('brotherSaid', '妈妈说，该做作业了！(^_^)!!!')
		    }
		}
	}
</script>

在SisterCard组件中：

参考自：https://www.jianshu.com/p/2c4970b2276c

// SisterCard.vue
<script>
	// 1.导入eventBus
    import { eventBus } from '../main'
    export default {
    	data: () => ({
            fromBrother: ""
        }),
        // 2.在mounted中写$on
	    mounted() {
	    	eventBus.$on('brotherSaid', (message) => {
	        	this.fromBrother = message
	    	})
	    },
	    // 3.在create中清缓存
		created() {
			// eventBus清缓存
			eventBus.$off('add_params')
		}
	}
}
</script>

经测试，效果如下：

• eventBus.$on 在 mounted 和 create 中均可以实现获取参数，具体根据你的需要来写
• 无论 eventBus.$on 写在 mounted 中还是 create 中，DOM 渲染结束之后均不能实现数据显示在页面上（如果想要刷新页面即显示数据，可以用 sessionStronge 来实现）

方式三、通过同一父组件

转自：https://blog.csdn.net/lhb215215/article/details/82966300

接下来的示例中，ParentCard组件包含了SisterCard和BrotherCard两个子组件，而且这两个子组件是兄弟组件。

首先创建ParentCard组件：在ParentCard的中定制了一个@sisterSaid事件侦听器，它触发了messageSon()方法。所以父组件在这两个兄弟组件之间起到了传递的作用。

// ParentCard.vue
<template>
    <div class="card">
        <div class="card-body">
            <brother-card :messageSon="messageson" @brotherSaid="messageDaughter($event)"></brother-card>
            <sister-card :messageDaughter="messagedaughter" @sisterSaid="messageSon($event)"></sister-card>
        </div>
    </div>
</template>

<script>
    import BrotherCard from './BrotherCard';
    import SisterCard from './SisterCard'
 
    export default {
        name: 'ParentCard',
        data: () => ({
            theCardTitle: '父组件',
            messagedaughter:'', 
            messageson:''
        }),
        components: {
            BrotherCard,
            SisterCard
        },
        methods: {
            messageDaughter(message) {
                this.messagedaughter = message;
            },
            messageSon(message) {
                this.messageson = message;
            }
        }
    };
</script>

创建SisterCard组件：

// SisterCard.vue
<template>
	<button @click="messageBrother">给哥哥发消息</button>
</template>
 
<script>
    export default {
        methods: {
            messageBrother() {
                this.$emit('sisterSaid', '妈妈说，该做作业了！(^_^)!!!')
            }
        }
    }
</script>

接着创建BrotherCard组件：

// BrotherCard.vue
<template>
	<p class="message-text">我是Brother组件</p>
	<button @click="messageSister" class="btn">给妹妹发消息</button>
</template>
 
<script>
    export default {
        methods: {
            messageSister() {
                this.$emit('brotherSaid', '妈妈说，该做作业了！(^_^)!!!')
            }
        }
    }
</script>