兄弟组件之间调用方法

业务需求： 要在router-view这个路由出口的组件中调用 aside-left组件中的方法。

理清关系：
aside-left组件和router-view之间是兄弟组件的关系；
router-view与它的出口组件之间其实可以看作父子组件；

总结：
兄弟组件之间调用方法：
组件上用ref进行表示 ==> this.$refs.child1Container.selectZonghenengli();

总结构:

<template>
  <el-container class="layout_container">
    <el-header height="auto"
      ><header-top :show="manage" :username="name"></header-top
    ></el-header>
    <el-container>
      <el-aside width="auto"
        ><aside-left @menuSlect="menuSlect" ref="child1Container"></aside-left
      ></el-aside>
      <el-main>
        <router-view :asideNav="navItem" @tiaozhuan="tiaozhuan"></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import HeaderTop from "../../components/layout/header";
import AsideLeft from "../../components/layout/aside";

import { getuserInfo } from "@/api/login";
export default {
  components: {
    HeaderTop,
    AsideLeft,
  },
  data() {
    return {
      //是否显示能力图谱管理按钮，以及获取用户信息
      manage: null,
      name: null,
      //导航项
      navItem: null,
    };
  },
  created() {
    this.getRoleInfo();
  },
  methods: {
    //获取个人信息，渲染header
    async getRoleInfo() {
      const { data: resolve } = await getuserInfo();
      console.log(resolve);
      this.name = resolve.name;
      if (resolve.roleId == 1) {
        this.manage = true;
      } else {
        this.manage = false;
      }
    },
    //传递asider的导航
    menuSlect(data) {
      // console.log(data)
      this.navItem = data;
    },
    //重点看这里：此处是监听路由出口，出口组件中的方法//
    tiaozhuan() {
    /触发兄弟组件的方法///
      this.$refs.child1Container.selectZonghenengli();
    },
  },
  computed: {},
};
</script>
<style scoped>
</style>

aside-left组件:

<template>
  <div class="aside_container">
    <el-menu
      @select="selectedMenu"
    >
      <el-menu-item v-for="(item,i) in asideNav" :key="i" :index="i+''"  
      :class="item.type == selectNav ? 'active' : '' " 
      @click="selectedMenuItem(item.type)"
      >
          <img  :src="item.type == selectNav ? require(`../../assets/aside/${item.src.active}.png`) : require(`../../assets/aside/${item.src.def}.png`)" alt="" />
          <span slot="title">{{item.title}}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script>
export default {
  data() {
    return {
      asideNav: [
        {title:"综合能力",type:"zonghe",src:{def: "zonghe",active:"zongheactive"}},
      ],
      selectNav: null
    };
  },
  created() {
    //保存激活的选项
    if(!window.sessionStorage.getItem('selectNav')) {
        window.sessionStorage.setItem('selectNav','zonghe')
    };
    this.selectNav = window.sessionStorage.getItem('selectNav');
    this.$emit("menuSlect",this.selectNav)
  },
  methods: {
    selectedMenu(key, keyPath) {
    },
    selectedMenuItem(type) {
        window.sessionStorage.setItem('selectNav',type)
        this.selectNav=type
        this.$emit("menuSlect",this.selectNav)
    },
    ///所要调用的方法//
    selectZonghenengli() {
      this.selectNav="ruanjian"
      this.$emit("menuSlect",this.selectNav)
      window.sessionStorage.setItem('selectNav',"ruanjian")
    }
  },
  computed: {},
};
</script>
<style scoped>
</style>

路由出口组件：

this.$emit('tiaozhuan');

欢迎随时私信，一起探讨问题