Vue父子组件间值传递

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的值