兄弟组件之间调用方法

组件之间调用方法"/>

兄弟组件之间调用方法

业务需求： 要在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: {//获取个人信息，渲染headerasync 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=typethis.$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');

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