Vue实现父子组件传参

墨蓝 2023-02-14 10:23 112阅读 0赞

### 目录 ###

*   *  前言
     *  一、父传子
     *  二、子传父

## 前言 ##

vue的父子组件传值方式：父传子、子传父

引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，事件向上传递

父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMTA4MjM3_size_16_color_FFFFFF_t_70]

--------------------

## 一、父传子 ##

**父组件**：

<template>
        <div id="container">
            <input type="text" v-model="text" @change="dataChange">
            <Child :msg="text"></Child>
        </div>
    </template>
    
    
    <script>
    import Child from "@/components/Child";
    export default {
        
      data() {
        
        return {
        
          text: "父组件的值"
        };
      },
      methods: {
        
        dataChange(data){
        
            this.msg = data
        }
      },
      components: {
        
        Child
      }
    };
    </script>

**子组件**：

<template>
        <div id="container">
            {
        {
        msg}}
        </div>
    </template>
    
    
    <script>
    export default {
        
      data() {
        
        return {
        };
      },
      props:{
        
        msg: String
      }
    };
    </script>

**可以看到，我们在父组件中注册了我们定义好的子组件，父传子的实现方式就是通过\`props属性，子组件通过props属性接收从父组件传过来的值，而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为data里面的数据即可**

--------------------

## 二、子传父 ##

**父组件**：

<template>
        <div id="container">
            <Child @getData="getData"></Child>
            <p>{
        {
        msg}}</p>
        </div>
    </template>
    
    <script>
    import Child from "@/components/Child";
    export default {
        
      data() {
        
        return {
        
          msg: "父组件默认值"
        };
      },
      methods: {
        
        getData(data) {
        
          this.msg = data;
        }
      },
      components: {
        
        Child
      }
    };

**子组件**：

<template>
        <div id="container">
            <input type="text" v-model="msg">
            <button @click="setData">传递到父组件</button>
        </div>
    </template>
    
    <script>
    export default {
        
      data() {
        
        return {
        
          msg: "传递给父组件的值"
        };
      },
      methods: {
        
        setData() {
        
          this.$emit("getData", this.msg);
        }
      }
    };
    </script>

子传父的实现方式就是用了 `this.$emit` 来遍历 `getData` 事件，首先用按钮来触发 `setData` 事件，在 `setData` 中 用 `this.$emit` 来遍历 `getData` 事件，最后返回 `this.msg`

**总结**：

1.  子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
2.  将需要传的值作为`$emit`的第二个参数，该值将作为实参传给响应自定义事件的方法
3.  在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMTA4MjM3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020060211385447.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMTA4MjM3,size_16,color_FFFFFF,t_70