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">
看看效果
好了结束!