Vue父子组件间的值传递可以实现多个组件的联动。
例如:Vue使用element-ui搭建后台管理页面,使用多个组件组成。需要点击一个组件中的按钮,来改变另个组件的状态(动态改变“导航菜单”收缩)
接单搭建后台管理页面,使用到了两组件:“v-asideLeftNav”,“v-headerNav”
<template>
<div class="full-height full-width">
<el-container class="full-height">
<!-- 左侧导航栏 -->
<el-aside style="width: auto">
<v-asideLeftNav :leftNavisCollapse='homeIsCollapse'></v-asideLeftNav>
</el-aside>
<el-container>
<!-- 头部导航栏 -->
<el-header>
<v-headerNav @headerNavChangeCollapse='changeCollapse'></v-headerNav>
</el-header>
<el-main>{{homeIsCollapse}}</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</div>
</template>
<style>
.full-height {
height: 100%;
}
.full-width {
width: 100%;
}
.el-menu-left-vertical:not(.el-menu--collapse) {
width: 200px;
}
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
</style>
<script>
import 'element-ui/lib/theme-chalk/display.css'
import AsideLeftNav from './navigation/AsideLeftNav'
import HeaderNav from './navigation/HeaderNav'
export default {
data () {
return {
homeIsCollapse: false
}
},
methods: {
changeCollapse (v) {
this.homeIsCollapse = v
}
},
components: {
'v-asideLeftNav': AsideLeftNav,
'v-headerNav': HeaderNav
}
}
</script>
左侧导航栏“v-asideLeftNav”
<template>
<div>
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="leftNavisCollapse">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">导航一</span>
</template>
<el-menu-item-group>
<span slot="title">分组一</span>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<span slot="title">选项4</span>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-setting"></i>
<span slot="title">导航三</span>
</el-menu-item>
</el-menu>
</div>
</template>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
height: 100%;
}
</style>
<script>
export default {
data () {
return {
// isCollapse: false
}
},
methods: {
handleOpen (key, keyPath) {
console.log(key, keyPath)
},
handleClose (key, keyPath) {
console.log(key, keyPath)
}
},
props: ['leftNavisCollapse']
}
</script>
头部导航栏“v-headerNav”
<template>
<div>
<el-button @click="open">拉伸或隐藏</el-button>
</div>
</template>
<script>
export default {
data () {
return {
headerNavisCollapse: false
}
},
methods: {
open () {
this.headerNavisCollapse = !this.headerNavisCollapse
this.$emit('headerNavChangeCollapse', this.headerNavisCollapse)
}
}
}
</script>
子组件传值给父组件流程:
1、点击按钮,执行open()
2、open()调用$emit(),向父组件传递changeCollapse,值为this.headerNavisCollapse
3、使用v-on:或@监听headerNavChangeCollapse,执行方法changeCollapse()获取changeCollapse的值
父组件传值给子组件流程:
1、父组件data()中添加个变量:homeIsCollapse
2、子组件使用props: ['leftNavisCollapse'](leftNavisCollapse作为一个自定义 attribute 传递进来,使用方式和data()一样)
3、子组件使用v-bind:collapse="leftNavisCollapse"设置collapse的值(collapse是el的属性)
整个操作就是头部导航点击按钮,修改属性,然后$emit()告诉父组件传headerNavisCollapse的值,父组件值执行changeCollapse()方法获取并设置homeIsCollapse值 ,另一个组件则通过props: ['leftNavisCollapse']获取leftNavisCollapse的值