子传父$emit+非父子组建通信--bus总线

参考视频资料： 点击查看

功能：点击箭头后，头部header组件要更改isCollapse值，并且传给侧边菜单栏aside组件，从而更改侧边栏宽度和样式

代码：
四个文件：Home.vue、Header.vue、Aside.vue、main.js

• main.js ==>

import Vue from 'vue'
Vue.prototype.$bus = new Vue()

Home组件 ==>

 <template>
  <el-container class="home">
    <!-- 侧栏 -->
    <!-- <el-aside width="auto"> -->
    <el-aside :width="isCollapse ? 'auto' : '200px'">
      <Aside />
    </el-aside>
    <el-container>
      <!-- 头部 -->
      <el-header><Header @tohome="home" /></el-header>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Aside from "./Aside.vue";
import Header from "./Header.vue";
export default {
  name: "Home",
  data() {
    return {
      // 菜单信息
      menuList: [
        {
          id: 101,
          path: "user",
          authName: "基本信息",
          elicon: "el-icon-s-order",
        },
        {
          id: 102,
          path: "search",
          authName: "靓房搜索",
          elicon: "el-icon-search",
        },
        {
          id: 103,
          path: "collection",
          authName: "收藏列表",
          elicon: "el-icon-star-on",
        },
        {
          id: 104,
          authName: "修改密码",
          path: "pwchange",
          elicon: "el-icon-key",
        },
        {
          id: 106,
          authName: "靓房管理",
          path: "housesmanage",
          elicon: "el-icon-menu",
        },
      ],
      isCollapse: false,
    };
  },
  components: {
    Aside,
    Header,
  },
  methods: {
    home(isCollapse) {
      this.isCollapse = isCollapse;
      console.log("home", isCollapse);
    },
  },
};
</script>

• Header组件 ==>

<template>
  <div class="header">
    <div class="block">
      <div class="start">
        <div class="little_nav" @click="cpnClick()" cursor="pointer">
          <i class="el-icon-back"></i>
        </div>
      </div>
      <div class="end">
        <el-avatar
          size="small"
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        ></el-avatar>
        <span>admin</span>
      </div>
    </div>
    <div class="dib"></div>
  </div>
</template>

<script>
import Vue from "vue";
var bus = new Vue();
export default {
  name: "Header",
  data() {
    return {
      isCollapse: false,
    };
  },
  methods: {
    cpnClick() {
      this.isCollapse = !this.isCollapse;
      this.$bus.$emit("collapse", this.isCollapse);
      this.$emit("tohome", this.isCollapse);
    },
  },
};
</script>

• Aside组件 ==>

<template>
  <div>
    <div v-if="!isCollapse" class="title">出租房管理系统</div>
    <el-menu
      default-active="/user"
      background-color="#545c64"
      :collapse-transition="false"
      :router="true"
      :collapse="isCollapse"
      active-text-color="rgb(102, 177, 255)"
    >
      <el-menu-item
        :index="'/' + item.path"
        v-for="item in menuList"
        :key="item.id"
      >
        <i :class="item.elicon"></i>
        <span slot="title">{{ item.authName }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "Aside",
  data() {
    return {
      isCollapse: false,
      menuList: [
        {
          id: 101,
          path: "user",
          authName: "基本信息",
          elicon: "el-icon-s-order",
        },
        {
          id: 102,
          path: "search",
          authName: "靓房搜索",
          elicon: "el-icon-search",
        },
        {
          id: 103,
          path: "collection",
          authName: "收藏列表",
          elicon: "el-icon-star-on",
        },
        {
          id: 104,
          authName: "修改密码",
          path: "pwchange",
          elicon: "el-icon-key",
        },
        {
          id: 106,
          authName: "靓房管理",
          path: "housesmanage",
          elicon: "el-icon-menu",
        },
      ],
    };
  },
  created() {
    this.$bus.$on("collapse", (isCollapse) => {
      console.log("这是rose注册的事件", isCollapse);
      this.isCollapse = isCollapse;
    });
  },
};
</script>