Vue - 详解父子组件之间动态传值

r囧r小猫 2021-07-25 23:58 1659阅读 0赞

###        在 vue 项目中经常需要父子组件之间进行传值，在传值过程中可能会遇到很多问题；下面来详细讲解父子组件传值的使用，及使用中常见问题的解决方案。 ###

*   *  一. 父组件向子组件传值
     *   *   *  1. 简单使用父组件向子组件传值
             *  2. 深入使用父组件向子组件传值，子组件动态获取父组件传值
     *  二. 子组件向父组件传值
     *  三. 父组件、子组件使用 中间件 互相传值

## 一. 父组件向子组件传值 ##

**父组件**：通过 `v-bind` 的形式进行传递  
例：通过 `v-bind` 属性把 `parentItem` 的值赋给 `parentArr` 变量

**子组件**：通过 `props` 方式接收父组件传递的值，可校验传递的数据

*  `type`：限制传递的数据类型
 *  `required`：设置数据是否必传（`true`：是，`false`：否）
 *  `default`：设置默认值，若父组件未向子组件传递数据，使用此数据
 *  自定义校验，**例**：父组件传递的数据长度必须大于 5
    
        validator:function(value){
          return (value.length > 5)
        }

例：通过 `props` 接收父组件传递的值 `parentArr`

props: {
      parentArr: {
        type: Array,
        required: true
      }
    },

#### 1. 简单使用父组件向子组件传值 ####

**实例一览：**  
父组件代码

<template>
      <div>
        <el-table :data="tableData" border stripe>
          <el-table-column label="编号" prop="id" align="center"></el-table-column>
          <el-table-column label="姓名" prop="name" align="center"></el-table-column>
          <el-table-column label="性别" prop="sex" align="center"></el-table-column>
          <el-table-column label="年龄" prop="age" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="show(scope.row)">详细信息</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <el-drawer
          title="我是标题"
          :visible.sync="drawerVisible"
          :with-header="false"
          :before-close="handleClose"
        >
          
          
          <child :parentArr="parentItem"></child>
        </el-drawer>
      </div>
    </template>
    
    <script>
    //子组件地址（仅供参考），具体以实际项目目录地址为准
    import child from "../child/Child.vue";
    export default {
      components: {
        child: child //子组件
      },
      data() {
        return {
          tableData: [
            {
              id: "001",
              name: "aaa",
              sex: "男",
              age: "18"
            },
            {
              id: "002",
              name: "bbb",
              sex: "女",
              age: "19"
            },
            {
              id: "003",
              name: "ccc",
              sex: "男",
              age: "20"
            }
          ],
          drawerVisible: false, //控制抽屉显示与隐藏
          parentItem: {}, //向子组件穿的的值
        };
      },
      methods: {
        show(row) {
          //展开抽屉
          this.drawerVisible = true;
          //获取所点击一行的信息，赋值到data中
          this.parentItem = row;
        }
      }
    };
    </script>
    
    <style scoped>
    </style>

子组件代码

<template>
      <div>
        <el-row>接收到父组件传递的消息:</el-row>
        <el-row>编号：{
       {parentData.id}}</el-row>
        <el-row>姓名:{
       {parentData.name}}</el-row>
        <el-row>性别：{
       {parentData.sex}}</el-row>
        <el-row>年龄：{
       {parentData.age}}</el-row>
        <el-divider></el-divider>
        <el-row>
          <el-button size="mini" @click="hide">关闭</el-button>
        </el-row>
      </div>
    </template>
    
    <script>
    export default {
      //接收父组件传递的数据
      props: {
        parentArr: {
          type: Array,
          required: true
        }
      },
      data() {
        return {
          //接收父组件传递的值
          parentData: {}
        };
      },
      mounted() {
        this.parentData = this.parentArr;
      },
      methods: {
        //执行关闭方法
        hide() {
          this.$emit("hideDrawer");
        }
      }
    };
    </script>
    
    <style scoped>
    </style>

#### 2. 深入使用父组件向子组件传值，子组件动态获取父组件传值 ####

通过上面的Demo，我们会发现父组件多次向子组件传递不同数据的时候，子组件接收的数据一直是第一次获取到的，没有实现动态改变，相信很多人都遇到过这个问题。  
那么想要实现子组件动态接收父组件传递的数据，需要怎么解决呢？这个时候我们就需要用到了`watch`侦听器。

**子组件：** 通过`watch`侦听器，侦听父组件传递的值  
例：监听父组件传回来的 `parentArr` 数据  
    当父组件传回来的数据发生改变时会执行侦听器中的方法

watch: {
        //newValue 新数据（本次父组件传递的数据）
        //oldValue 旧数据（上一次父组件传递的数据）
        parentArr(newValue, oldValue) {
          console.log(newValue);
          if (newValue) {
            //将新值赋值到data中
            this.parentData = newValue;
          }
        }
      },

**实例一览：**  
父组件代码

<template>
      <div>
        <el-table :data="tableData" border stripe>
          <el-table-column label="编号" prop="id" align="center"></el-table-column>
          <el-table-column label="姓名" prop="name" align="center"></el-table-column>
          <el-table-column label="性别" prop="sex" align="center"></el-table-column>
          <el-table-column label="年龄" prop="age" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="show(scope.row)">详细信息</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <el-drawer
          title="我是标题"
          :visible.sync="drawerVisible"
          :with-header="false"
          :before-close="handleClose"
        >
          
          
          <child :parentArr="parentItem"></child>
        </el-drawer>
      </div>
    </template>
    
    <script>
    //子组件地址（仅供参考），具体以实际项目目录地址为准
    import child from "../child/Child.vue";
    export default {
      components: {
        child: child //子组件
      },
      data() {
        return {
          //table数据
          tableData: [
            {
              id: "001",
              name: "aaa",
              sex: "男",
              age: "18"
            },
            {
              id: "002",
              name: "bbb",
              sex: "女",
              age: "19"
            },
            {
              id: "003",
              name: "ccc",
              sex: "男",
              age: "20"
            }
          ],
          drawerVisible: false, //控制抽屉显示与隐藏
          parentItem: {}, //向子组件穿的的值
        };
      },
      methods: {
        show(row) {
          //展开抽屉
          this.drawerVisible = true;
          //获取所点击一行的信息
          this.parentItem = row;
        }
      }
    };
    </script>
    
    <style scoped>
    </style>

子组件代码

<template>
      <div>
        <el-row>接收到父组件传递的消息:</el-row>
        <el-row>编号：{
       {parentData.id}}</el-row>
        <el-row>姓名:{
       {parentData.name}}</el-row>
        <el-row>性别：{
       {parentData.sex}}</el-row>
        <el-row>年龄：{
       {parentData.age}}</el-row>
        <el-divider></el-divider>
        <el-row>
          <el-button size="mini" @click="hide">关闭</el-button>
        </el-row>
      </div>
    </template>
    
    <script>
    export default {
      //接收父组件传递的数据
      props: {
        parentArr: {
          type: Array,
          required: true
        }
      },
      //侦听父组件传递的数据，动态改变
      watch: {
        parentArr(newValue, oldValue) {
          console.log(newValue);
          if (newValue) {
            //将新值赋值到data中
            this.parentData = newValue;
          }
        }
      },
      data() {
        return {
          //接收父组件传递的值
          parentData: {}
        };
      },
      mounted() {
        this.parentData = this.parentArr;
      },
      methods: {
        //执行关闭方法
        hide() {
          this.$emit("hideDrawer");
        }
      }
    };
    </script>
    
    <style scoped>
    </style>

## 二. 子组件向父组件传值 ##

**子组件向父组件传值是通过方法传递的，也可以说是子组件调用父组件方法。**

**子组件**：通过 `$emit()` 向外触发父组件中方法，同时进行数据的传递  
例：通过 `$emit` 触发父组件中的`hide`方法， `msg` 为子组件向父组件穿的数据

const msg = "执行到了";
    this.$emit("hide", msg);

**父组件**：通过方法监听子组件的状态  
例：通过 `v-on` 方法监听`hideDrawer`方法

**实例一览：**

父组件

<template>
      <div>
        <el-button @click="show">展开子组件抽屉</el-button>
        <el-row>接收到子组件传递的消息：{
       {childData}}</el-row>
        
        <el-drawer
          title="我是标题"
          :visible.sync="drawerVisible"
          :with-header="false"
          :before-close="handleClose"
        >
          
          
          <child @hideMethods="hideDrawer"></child>
        </el-drawer>
      </div>
    </template>
    
    <script>
    //子组件地址（仅供参考），具体以实际项目目录地址为准
    import child from "../child/Child.vue";
    export default {
      components: {
        child: child //子组件
      },
      data() {
        return {
          drawerVisible: false, //控制抽屉显示与隐藏
          childData: "" //子组件传递回来的值
        };
      },
      methods: {
        show(row) {
          //展开抽屉
          this.drawerVisible = true;
        },
        //darwer抽屉关闭前的回调，会暂停 Drawer 的关闭
        handleClose() {},
        //被子组件执行的方法,接收子组件传递的数据
        hideDrawer(msg) {
          //关闭抽屉
          this.drawerVisible = false;
          //接收子组件传递回来的数据（msg），赋值到data中
          this.childData = msg;
        }
      }
    };
    </script>
    
    <style scoped>
    </style>

**子组件**

<template>
      <div>
          <el-button @click="hideDra">关闭</el-button>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          msg:"执行到了"
        };
      },
      methods: {
        //执行关闭方法
        hideDra() {
          this.$emit("hideMethods", this.msg);
        }
      }
    };
    </script>
    
    <style scoped>
    </style>

## 三. 父组件、子组件使用 中间件 互相传值 ##

**1. 创建一个js文件，这里为 `send.js`**  
![在这里插入图片描述][20200708115421550.png]  
**2. `send.js` 中配置**  
![在这里插入图片描述][20200708115631862.png]

import Vue from 'vue'
    export default new Vue()

**3. 组件中使用**

*  传递值

this.$send.$emit('send',"需要传的数据")

*  接收值

this.$send.$on('send',(res)=>{
      console.log(res)
    })

**4. 实例代码**

*  父组件代码：

<template>
      <div>
        <button @click="toChild">父组件向子组件传值</button>
        <hr />
        <Child></Child>
      </div>
    </template>
    
    <script>
    //引入子组件
    import Child from "../fourDay/Two.vue";
    export default {
      data() {
        return {};
      },
      mounted() {
        this.$send.$on("send", res => {
          console.log(res);
        });
      },
      components: {
        Child
      },
      methods: {
        toChild() {
          this.$send.$emit("send", "父组件方法执行成功");
        }
      }
    };
    </script>
    
    <style scoped>
    </style>

*  子组件方法：

<template>
      <div>
        <button @click="toParent">子组件向父组件传值</button>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {};
      },
      mounted() {
        this.$send.$on("send", res => {
          console.log(res);
        });
      },
      methods: {
        toParent() {
          this.$send.$emit("send", "子组件方法执行成功");
        }
      }
    };
    </script>
    
    <style scoped>
    </style>

[20200708115421550.png]: /images/20210725/514485a27b304cab89cb37fa3ce182ed.png
[20200708115631862.png]: /images/20210725/cde63507e0f447249b432eb1c0614307.png