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

偏执的太偏执、 2023-06-03 07:00 13阅读 0赞

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>
        
      </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">
            
            
            {
       {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.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>