Vue兄弟组件之间的传值实现左侧菜单栏和右侧内容区域对应切换

goods.vue

<template>
  <el-row type="flux">
    <el-container style="height: 500px; border: 1px solid #eee" >
      <el-aside width="135px" style="background-color: rgb(238, 241, 246)">
        <Menu></Menu>
      </el-aside>
      <el-main width="30%" style="background-color: rgb(238, 241, 246)">
        <foods></foods>
      </el-main>
    </el-container>
    <!-- <router-view/> -->
  </el-row>

</template>

<script>
import foods from './foods/foods'
import Menu from './Menu'
export default {
  name: 'goods',
  components: {foods, Menu}
}
</script>

<style scoped>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>

1.建立一个总线Msg.js

import Vue from 'vue'
export default new Vue()

2.组件Menu.vue用Msg.$emit发送消息

Menu.vue

<template>
  <el-menu :text-color="'#82888E'" :active-text-color="'#000' " :background-color="'#F4F5F7'" default-active="id">
    <div v-for="(good) in this.$store.state.goods" :key="good.id">
      <el-menu-item @click="menu(good.id)" index="good.id">
        <!-- <router-link :to="{name: 'foods',params: {goodsId: good.id,foodsId: 0}}">{{good.id + good.name}}</router-link> -->
        <!-- <button @click="changeGoods">{{good.name}}</button> -->
        {{good.name}}
      </el-menu-item>
    </div>
  </el-menu>
</template>

<script>
import Msg from '../Msg.js'
export default {
  name: 'Menu',
  methods: {
    menu (i) {
      Msg.$emit('val', i)
      // console.log(i)
    }
  }
}
</script>

<style scoped >

</style>

3.组件foods.vue使用Msg.$on监听消息

<template>
  <div>
    <!-- {{ this.$store.state.goodsId}}
    {{this.$store.state.foodsId }} -->
    {{this.msg}}
  </div>
</template>

<script>
import Msg from '../../Msg.js'
export default {
  name: 'foods',
  data () {
    return {
      msg: 0
    }
  },
  mounted () {
    var _this = this
    // console.log('kk')
    Msg.$on('val', function (m) {
      _this.msg = m
      // console.log('kk' + _this.kk)
    })
    // console.log('kk2' + this.kk)
  }
}
</script>

<style scoped>

</style>