Vue--组件通信--子组件向父组件传值--使用/教程/实例

比眉伴天荒 2023-10-02 14:09 11阅读 0赞

原文网址：[Vue--组件通信--子组件向父组件传值--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vue--_--_--_IT_-CSDN]

## 简介 ##

**说明**

本文用示例介绍Vue中子组件给父组件传值的方法。（父组件获取子组件的值的方法）。

组件通信是前端开发中常见的场景，也是面试常问的问题。

Vue中的props只能用于父组件向子组件传值。

**子组件给父组件传值的方案**

虽然prop不能从子组件到父组件传递，但有其他方案可以做到子组件给父组件传递数据。如下：

1.  prop + $emit（事件）
2.  v-model（本质是对事件的封装）
3.  v-model + model（本质是对事件的封装）
4.  .sync 修饰符（本质是对事件的封装）
5.  多个 prop的双向绑定

**Vue的props只能父组件向子组件传值**

有时需要对一个 prop 进行“双向绑定”，也就是：父子组件双向通信。

但是，vue组件间的传值都是单向数据流：父组件值更新更新会传到子组件，但反过来不行。按官网的 [单向数据流][Link 1] 解释：所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。

vue的prop是单向数据流的原因：真正的双向绑定会带来维护上的问题；若子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源会导致应用的数据流向难以理解。

最常见的就是在公共组件中（如计数器、单选按钮）中，子组件（计数器）把父组件传来的数字展示出来。在点击子组件的添加按钮时，因为单向数据流的原因，不能直接在子组件中给数字+1。

**本文案例**

本文以计数器为例，说明子组件给父组件传递数据的方案。

在公共组件中（如计数器、单选按钮）中，子组件（计数器）把父组件传来的数字展示出来。在点击子组件的添加按钮时，父组件可以给数字+1（间接地）。

## **公共代码** ##

import Vue from 'vue'
    import Router from 'vue-router'
    import CompA from "@/components/CompA";
    
    export default new Router({
      routes: [
        {
          path: '/compA',
          name: 'compA',
          component: CompA
        }
      ]
    })

## 方案1：事件(Event) ##

**components/CompA（父组件）**

<template>
      <div class="compA">
        <p>CompA</p>
        <p>count: {
       { count }}</p>
        <hr>
        <comp-b v-bind:count="count" v-on:update:count="count = $event"></comp-b>
      </div>
    </template>
    
    <script>
    import CompB from "@/components/CompB";
    
    export default {
      components: {CompB},
      data() {
        return {
          count: 0,
        }
      },
    }
    </script>
    
    <style scoped>
    
    </style>

**components/CompB（子组件）**

<template>
      <div class="compB">
        <p>CompB</p>
        <button @click="updateCount">You click me {
       {count}} times</button>
      </div>
    </template>
    
    <script>
    export default {
      props: ['count'],
      methods: {
        updateCount() {
          this.$emit('update:count', +this.count + 1);
        },
      }
    }
    </script>
    
    <style scoped>
    
    </style>

**测试**

访问：[http://localhost:8080/\#/compA][http_localhost_8080_compA]

未点击按钮前

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70][]

每点击按钮一次，数目加1（父组件和子组件会同步显示）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1][]

## 方案2：v-model ##

**官网**

[自定义组件的-v-model][-v-model]

**简介**

自定义组件的v-model其实就是父子组件通信的语法糖而已，它等价于:value="value（固定格式）" @input="emitEvent（组件emit带的第一个参数）"。即：

<comp-b v-model="value"></comp-b>

也就是说，此时。子组件中emit的自定义事件名需要为input。父子组件中传的值键名需要是value。

**实例**

**components/CompA（父组件）**

<template>
      <div class="compA">
        <p>CompA</p>
        <p>count: {
       { value }}</p>
        <hr>
        <comp-b v-model="value"></comp-b>
        
        
      </div>
    </template>
    
    <script>
    import CompB from "@/components/CompB";
    
    export default {
      components: {CompB},
      data() {
        return {
          value: 0,
        }
      },
    }
    </script>
    
    <style scoped>
    
    </style>

**components/CompB（子组件）**

<template>
      <div class="compB">
        <p>CompB</p>
        <button @click="changeCount">You click me {
       {value}} times</button>
      </div>
    </template>
    
    <script>
    export default {
      props: ['value'],
      methods: {
        changeCount() {
          this.$emit('input', +this.value + 1);
        },
      }
    }
    </script>
    
    <style scoped>
    
    </style>

**测试**

访问：[http://localhost:8080/\#/compA][http_localhost_8080_compA]

未点击按钮时：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 2][]

每点击按钮一次，数目加1（父组件和子组件会同步显示）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 3][]

**注意**

components/CompA中，必须用<comp-b v-model="value"></comp-b>，它生成的html如下：**如果将CompA和CompB的value都替换为count，则是不成功的。如下**

未点击按钮时：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 4][]

点击按钮之后

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 5][]

## 方案3：v-model + model ##

**官网**

[model][]

**简介**

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

**实例**

**components/CompA（父组件）**

<template>
      <div class="compA">
        <p>CompA</p>
        <p>count: {
       { count }}</p>
        <hr>
        <comp-b v-model="count"></comp-b>
      </div>
    </template>
    
    <script>
    import CompB from "@/components/CompB";
    
    export default {
      components: {CompB},
      data() {
        return {
          count: 0,
        }
      },
    }
    </script>
    
    <style scoped>
    
    </style>

**components/CompB（子组件）**

<template>
      <div class="compB">
        <p>CompB</p>
        <button @click="changeCount">You click me {
       {count}} times</button>
      </div>
    </template>
    
    <script>
    export default {
      props: ['count'],
      model:{
        prop: "count",
        event: 'change-count'
      },
      methods: {
        changeCount() {
          this.$emit('change-count', +this.count + 1);
        },
      }
    }
    </script>
    
    <style scoped>
    
    </style>

**测试**

访问：[http://localhost:8080/\#/compA][http_localhost_8080_compA]

未点击按钮时：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 6][]

每点击按钮一次，数目加1（父组件和子组件会同步显示）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 7][]

## 方案4：.sync 修饰符 ##

**官网**

[.sync 修饰符][.sync]

**简介**

详见：[Vue--.sync--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vue--.sync--_IT_-CSDN]

**实例**

components/CompA（父组件）

<template>
      <div class="compA">
        <p>CompA</p>
        <p>count: {
       { myCount }}</p>
        <hr>
        <comp-b v-bind:count.sync="myCount"></comp-b>
        
        
      </div>
    </template>
    
    <script>
    import CompB from "@/components/CompB";
    
    export default {
      components: {CompB},
      data() {
        return {
          myCount: 0,
        }
      },
    }
    </script>
    
    <style scoped>
    
    </style>

可以看到：此时变量名不对应子组件的props的prop名。

components/CompB（子组件）

<template>
      <div class="compB">
        <p>CompB</p>
        <button @click="changeCount">You click me {
       {count}} times</button>
      </div>
    </template>
    
    <script>
    export default {
      props: ['count'],
      methods: {
        changeCount() {
          this.$emit('update:count', +this.count + 1);
        },
      }
    }
    </script>
    
    <style scoped>
    
    </style>

**测试**

访问：[http://localhost:8080/\#/compA][http_localhost_8080_compA]

未点击按钮时：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 8][]

每点击按钮一次，数目加1（父组件和子组件会同步显示）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 9][]

## 方案5：多个 prop的双向绑定 ##

**官网**

[.sync 修饰符][.sync]

**简介**

跟方案4相同，依然使用.sync。把 countGroup 对象中的每一个 property (如 count) 都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器。

**实例**

**components/CompA.vue（父组件）**

<template>
      <div class="compA">
        <p>CompA</p>
        <p>count1: {
       { countGroup.count1 }}</p>
        <p>count2: {
       { countGroup.count2 }}</p>
        <hr>
        <comp-b v-bind.sync="countGroup"></comp-b>
      </div>
    </template>
    
    <script>
    import CompB from "@/components/CompB";
    
    export default {
      components: {CompB},
      data() {
        return {
          countGroup:{
            count1: 0,
            count2: 0
          }
        }
      },
    }
    </script>
    
    <style scoped>
    
    </style>

**components/CompB.vue（子组件）**

<template>
      <div class="compB">
        <p>CompB</p>
        <button @click="changeCount1">You click count1 {
       {count1}} times</button>
        <button @click="changeCount2">You click count2 {
       {count2}} times</button>
      </div>
    </template>
    
    <script>
    export default {
      props: ['count1', 'count2'],
      methods: {
        changeCount1() {
          this.$emit('update:count1', +this.count1 + 1);
        },
        changeCount2() {
          this.$emit('update:count2', +this.count2 + 1);
        },
      }
    }
    </script>
    
    <style scoped>
    
    </style>

**测试**

访问：[http://localhost:8080/\#/compA][http_localhost_8080_compA]

未点击按钮时：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 10][]

每点击按钮一次，数目加1（父组件和子组件会同步显示）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 11][]

## 方案6：$refs或$children ##

见：[Vue--$ref, $parent, $children--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vue--_ref_ _parent_ _children--_IT_-CSDN]

## 其他网址 ##

[父子组件prop值的双向绑定][prop]

[Vue--_--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/121186674
[Link 1]: https://cn.vuejs.org/v2/guide/components-props.html#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81
[http_localhost_8080_compA]: http://localhost:8080/#/compA
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201115225326733.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201115225400812.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[-v-model]: https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201115225451492.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201115225510971.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201115225611866.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2020111522563943.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[model]: https://cn.vuejs.org/v2/api/#model
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201115225728653.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20201115225750681.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[.sync]: https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6
[Vue--.sync--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122571289
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20201115225841624.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20201115225902370.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20201115221054453.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20201115221128306.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[Vue--_ref_ _parent_ _children--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122390416
[prop]: https://juejin.im/post/6868632607534350344