vue 用户点击不同的导航菜单，显示对应菜单所展示的区域

情景：

导航栏在一个单独组件NavigationBar/index.vue，中间的内容区也是一个单独组件ContentComponents/index.vue，但这个组件都是属于Home子组件，NavigationBar和ContentComponents属于兄弟级组件

需求：

用户通过点击NavigationBar组件里每一个导航菜单，把所点击的导航菜单名称value和类型type（该类型可控制中间的内容区划分的是一半区域，整个区域或默认初始区域）传给ContentComponents组件，ContentComponents组件根据接收到的值显示所划分的不同区域内容

图1：默认初始区域

图2：一半区域

 图3：整个区域

 实现：主要利用兄弟组件之间传值的知识，两种方法

        方法一：利用事件总线bus，通常用于两个兄弟组件之间没有任何关联，如没有共同的父级

        方法二：利用父组件在中间作桥梁，相互传值（子组件A传值给父组件，父组件传值给子组件B），本项目中使用的是第二种方法

子组件A：绑定导航菜单点击事件clickNav，传两个参数value,type，this.$emit发送事件和需要用到的值

<template>
  <div class="navigator">
    <div class="column">
      <img src="/images/icon-01.png" alt="" />
      <p>首页</p>
    </div>
    <!-- 实况预报 -->
    <div class="column adver">
      <div class="title">
        <p>实况预报</p>
      </div>
      <div class="text">
        <div class="no-hd">
          <ul>
            <li>
              <a href="" @click.prevent="clickNav(navList[0], 'half')"
                >天气实况</a
              >
            </li>
            <li>
              <a href="" @click.prevent="clickNav(navList[1], 'half')">卫星云图</a>
            </li>
          </ul>
        </div>
        <div class="no-hd">
          <ul>
            <li>
              <a href="" @click.prevent="clickNav(navList[2], 'half')"
                >天气预报</a
              >
            </li>
            <li>
              <a href="" @click.prevent="clickNav(navList[3], 'half')">雷达回波</a>
            </li>
          </ul>
        </div>
        <div class="no-hd">
          <ul>
            <li>
              <a href="" @click.prevent="clickNav(navList[4], 'half')">预警信号</a>
            </li>
            <li>
              <a href="" @click.prevent="clickNav(navList[5], 'half')"
                >生活指数</a
              >
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      navList: [
        "天气实况",
        "卫星云图",
        "天气预报",
        "雷达回波",
        "预警信号",
      ],
    };
  },
  methods: {
    clickNav(value, type) {
      this.$emit("contentChange", { type, value });
    },
  },
};
</script>

<style scoped>
@import "./index.css";
</style>

父组件

<template>
    <!--导航栏-->
    <div class="navigation-bar">
      <!--组件A，父组件接收第一个孩子提供的值 -->
      <NavigationBar @contentChange="contentChange" />
    </div>

    <!--内容区域-->
    <div class="content-components">
        // 组件B
       <!-- <ContentComponents :getValue="getValue" /> -->
       <ContentComponents ref="contentCom" />
    </div>
</template>
<script>
    import NavigationBar from "./NavigationBar";
    import TipsMessage from "./TipsMessage";
    import ContentComponents from "./ContentComponents";
    export default {
      name: "index",
      data() {
        return {
          getValue: "",
        };
      },
      components: {
        NavigationBar,
        ContentComponents
      },
      mounted() {},
      methods: {
        contentChange(conInfo) {
          this.$refs.contentCom.mainContentName = conInfo.value; // 调用函数
          this.$refs.contentCom.contentType = conInfo.type;
          console.log("msg----" + conInfo);
        },
      },
    };
</script>

子组件B

data() {
    return {
      contentType: "default",
      mainContentName: "",
    };
  },

即contentType代表type，mainContentName代表导航菜单的名称value

<div>
    ///整个区域
    <div v-if="contentType == 'full'" class="full-content">
      <MeteorologicalInformation v-if="mainContentName == '气象资讯'" />
    </div>

    <div v-else class="scatter-content">
      <div class="left-content">
        ///默认初始区域
        <div v-if="contentType == 'default'" class="default">
          <div class="map-message">
            <div class="map-content">
              <WeatherMap />
            </div>

            <div class="weather-message">
              <WeatherMessage />
            </div>
          </div>

          <div class="whole-point">
            <WholePoint></WholePoint>
          </div>

          <div class="agromete-orology">
            <AgrometeOrology></AgrometeOrology>
          </div>
        </div>
        ///一半区域
        <div v-if="contentType == 'half'" class="half-content">
          <WeatherFacts v-if="mainContentName == '天气实况'" />
          <LifeIndex v-if="mainContentName == '生活指数'" />
        </div>
      </div>

      <div class="right-content">
        <!--登录和预警-->
        <div class="login-warn">
          <LoginWarn />
        </div>
        <div class="new-media-weather">
          <NewMediaWeather></NewMediaWeather>
        </div>
      </div>
    </div>
</div>

补充：

兄弟组件之间相互传值：

1.vuex传值

2.$emit传值，props接收

见收藏博客，参考：vue兄弟组件之间传值的两种办法_袋鼠@糊糊的博客-CSDN博客_vue兄弟组件传值

兄弟组件之间相互调用方法

见收藏博客，参考：vue兄弟组件之间传值和方法调用_南有樛木。的博客-CSDN博客_vue调用兄弟组件的方法