Vue兄弟组件互相传值

Vue兄弟组件互相传值

兄弟组件互相传值。我们主要介绍的是通过父组件进行一个通讯。 首先A组件 传入到父组件，然后在通过父组件传入到B组件中。

案例 饿了么组件中 菜单导航栏中 展开 收起按钮在Header组件中。 菜单栏在Aside 组件中。他们都有一个 Main 组件。

Header 组件

<template>
  <div class="header">
      <div class="logo">
          <i v-if="!isCollapse" @click="negate" class="el-icon-s-fold"></i>
          <i v-if="isCollapse" @click="negate" class="el-icon-s-unfold"></i>
          <h2>SWEET 后台管理系统</h2>
      </div>
      <div class="me">
        <el-tooltip class="item" effect="dark" :content="tip" placement="bottom">
          <el-badge :value="3" class="item">
            <i class="el-icon-message-solid notice"></i>
          </el-badge>
        </el-tooltip>
        <img src="https://img.xiaohongshu.com/avatar/5c2c2e1b0000000006004f3e.jpg@240w_240h_90q_1e_1c_1x.jpg" width="40px" alt="">
        <el-dropdown :hide-on-click="false">
        <span class="el-dropdown-link">
            {{ userVo.username }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu class="logout" slot="dropdown">
            <el-dropdown-item>退出登录</el-dropdown-item>
        </el-dropdown-menu>
        </el-dropdown>
      </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      tip: '您有3条未读信息',
      isCollapse: false
    }
  },
  methods: {
    negate () {
      this.isCollapse = !this.isCollapse
      console.log(this.isCollapse)
      this.$emit('isCollapse', this.isCollapse)
    }
  },
  mounted () {

  },
  computed: {
    userVo () {
      console.log(this.$store.state.user)
      return this.$store.state.user
    }
  }
}
</script>
<style scoped>
.header {
  position: fixed;
  display: flex;
  height: 60px;
  width: 100%;
  background-color: #4eaab9;
  z-index: 99999;
}
.logo {
    display: flex;
    width: 220px;
    height: 60px;
    line-height: 60px;
    padding-left: 20px;
}
.logo h2 {
    font-size: 16px;
    color: #fff;
    font-weight: 700;
}
.logo i{
    line-height: 60px;
}
.logo i::before {
    font-size: 34px;
    color: #fff;
    cursor: pointer;
}
.me {
    width: 250px;
    margin-left: auto;
    height: 60px;
    color: #fff;
}
.me i::before {
    font-size: 24px;
    color: #fff;
}
.me img {
    border-radius: 50%;
    vertical-align: middle;
    margin-left: 20px;
    line-height: 60px;
}
.el-dropdown-link {
    color: #fff;
}

.el-icon-arrow-down::before {
    font-size: 13px !important;
}
.el-dropdown {
  line-height: 60px;
}
.item {
  z-index: 9999999;
}
.notice {
   cursor: pointer;
}
</style>

主要是在 negate 方法 中的 this.$emit('isCollapse', this.isCollapse) ， 这句话制定了 在父组件中 通过 isCollapse 属性接受 this.isCollapse这个变量。我们的父组件是 Main.vue。 我们来看看 man.vue的代码

<template>
  <div>
      <el-container>
        <vHeader @isCollapse="getIsCollapse"></vHeader>
        <el-container>
            <vAside :isCollapse="isCollapse"></vAside>
            <el-main>
                <router-view/>
            </el-main>
        </el-container>
      </el-container>
  </div>
</template>
<script>
import vHeader from '../layout/header'
import vAside from '../layout/aside'
export default {

  components: {
    vHeader,
    vAside
  },
  data() {
    return {
      isCollapse: false
    }
  },
  methods: {
    getIsCollapse (res) {
      console.log(res)
      this.isCollapse = res
    }
  }
}
</script>
<style scoped>
.el-main {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    padding-top: 60px;
    padding-left: 220px;
    background-color: skyblue;
    z-index: 0;
}
</style>

我们通过 import vHeader from '../layout/header' 引入了 header组件。
然后通过 <vHeader @isCollapse="getIsCollapse"></vHeader> 指定了 @isCollapse 就是 刚刚在 header 组件中 指定的属性。然后 通过 getIsCollapse 方法来接受 子组件传入的值

getIsCollapse (res) {
  console.log(res)
  this.isCollapse = res
}

这个res 便是 header 组件传入父组件的值了。<vAside :isCollapse="isCollapse"></vAside> 在使用Aside 组件传入 isCollapse 的值，然后我们来看看Aside组件如何接受这个值把

<template>
  <div class="aside">
    <el-menu
    default-active="2"
    class="aside-el-menu"
    @open="handleOpen"
    @close="handleClose"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    :collapse="isCollapse">
    <el-submenu v-for="root in rootMenu" :key="root.id" :index="root.id">
      <template slot="title">
      <i :class="root.meta.icon"></i>
      <span>{{ root.meta.title }}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item v-for="menu in root.children" :index="menu.id" :key="menu.id">
          <i :class="menu.meta.icon"></i>
          <span> {{ menu.meta.title }}</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>

   
    </el-menu>
  </div>
</template>
<script>
export default {
  props: [
    'isCollapse'
  ],
  data () {
    return {
      rootMenu: []
    }
  },
  methods: {
    getMenu() {
      let menus = this.$store.state.rootMenu;
      this.rootMenu = JSON.parse(menus)
      console.log(this.rootMenu)
    },
    handleOpen (key, keyPath) {
      console.log(key)
      console.log(keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key)
      console.log(keyPath)
    }
  },
  mounted () {
    this.getMenu()
  },
  watch: {
    isCollapse: function (newVal, oldVal) {
      console.log(newVal)
    }
  }
}
</script>
<style scoped>
.aside {
  position: absolute;
  height: 100%;
  background-color: #555;
  box-sizing: border-box;
  top: 0px;
  padding-top: 60px;
  z-index: 99;
  overflow-y: scroll;
}
.aside-el-menu:not(.el-menu--collapse) {
    width: 220px;
}
.aside::-webkit-scrollbar {
    width: 0;
}
.aside >>> .el-menu {
    border-right: none;
}
</style>

props: [
  'isCollapse'
],

通过props 定义 父组件传入的 参数名为 isCollapse 。 然后直接在定义中使用。

:collapse="isCollapse">

看看效果

好了结束！