vue兄弟组件传值-优雅的解决办法

兄弟组件传值

• 兄弟1 - 传给父组件，父组件 - 传给兄弟2
  这个方法不优雅而且和组件化的思想有相悖之处，如果另一个组件需要用到还要单独的复制粘贴父组件的逻辑，不推荐

• 创建一个js文件当做媒介，来监听一个事件进行数据传送

场景，子组件1 和 子组件2 是分离的
子组件2 是隐藏的
子组件1 可以控制 子组件2 显示

1. 这里我先创建了一个hideNavMiddle.js文件当作媒介

//hideNavMiddle.js
import Vue from 'vue'

const Bus = new Vue;

export default Bus

2. 在组件1中引入，并用$emit 发送事件 topNavShow

//组件1
import Bus from './hideNavMiddle'

methods:{
    busValue() {
      Bus.$emit('topNavShow', true);
    }
  }

3. 在组件2中mounted监听事件

import Bus from './hideNavMiddle'

mounted(){
    const that = this;
    Bus.$on("topNavShow", msg => {
      that.topNav = msg;
    })
  }

这样复用的时候只需要引入两个组件通信的媒介就可以了。