【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

深碍√TFBOYSˉ_ 2021-12-14 10:51 634阅读 1赞

# [【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据][Vue_Vue_sync] #

**目录**

*  [子组件向父组件中传递数据][Link 1]
    
     *  [一. 通过props从父向子组件传递函数,调用函数改变父组件数据][. _props]
     *  [二.  通过自定义事件从子组件向父组件中传递数据][._]
     *  [三. 通过ref属性在父组件中直接取得子组件的数据（data）][. _ref_data]
 *  [通过sync实现数据双向绑定， 从而同步父子组件数据][sync_]
 *  [数据双向绑定是把双刃剑][Link 2]
 *  [当sync修饰的prop是个对象][sync_prop]
 *  [不要通过在子组件中修改引用类型props达到“父子组件数据同步”的需求！][props]

**正文**

**前言：** 之前写过一篇文章《在不同场景下Vue组件间的数据交流》，**但现在来看，其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处**， 正好这几天学习了关于用sync修饰符做父子组件数据双向绑定的的用法， 于是决定写一篇文章， 再次总结下“Vue中的父子组件通信”。  
  
**前面提示：本文文字略少，代码略多**

**父子组件通讯，可分为两种情况：**

**1. 父组件向子组件中传递数据**  
**2. 子组件向父组件中传递数据**  
  
**一般情况下， 1中情况可通过props解决数据传递的问题， 这里就不多赘述了。**

[回到顶部][Link 3]

## 子组件向父组件中传递数据 ##

**主要谈谈2中情景的实现**，有**三种**方式：

**一.** 通过props，父组件向子组件中传递数据和改变数据的函数，通过在子组件中调用父组件传过来的函数，达到更新父组件数据（向父组件传递数据）的作用（子组件中需要有相应的响应事件）  
二**.** 通过在子组件中触发一个 自定义事件（vm.$emit）,将数据作为vm.$emit方法的参数，回传给父组件用v-on：\[自定义事件\]监听的函数  
三**.**通过ref对子组件做标记，父组件可以通过vm.$refs.\[子组件的ref\].\[子组件的属性/方法\]这种方式直接取得子组件的数据

下面我将一 一展示

### 一. 通过props从父向子组件传递函数,调用函数改变父组件数据 ###

这里就不做代码展示了  
一来是因为相对比较简单  
二来是因为这种方式显然不是Vue中的最佳实践（在react中倒比较常见）   
想要看代码的话可以看这里：《【Vue】浅谈Vue不同场景下组件间的数据交流》[http://www.cnblogs.com/penghuwan/p/7286912.html\#\_label1][http_www.cnblogs.com_penghuwan_p_7286912.html_label1] （在兄弟组件的数据交流那一节）

### 二.  通过自定义事件从子组件向父组件中传递数据 ###

我们可以在子组件中通过$emit(event, \[...参数\])触发一个自定义的事件，这样，父组件可以在使用子组件的地方直接用 v-on来监听子组件触发的事件, 并且可以在监听函数中依次取得所有从子组件传来的参数  
  
例如：  
在子组件中某个部分写入：

this.emit('eventYouDefined', arg);

然后你就可以在父组件的子组件模板里监听：  
// 这里是父组件的Template：

**下面是一个实例**

父组件

![复制代码][copycode.gif]

<template>
      <div id="father">
        <div>
           我是父组件,我接受到了：
          {
          { text || '暂无数据'  }}
          <son v-on:sendData='getSonText'></son>
        </div>
      </div>
    </template>
     
    <script>
    import son from './son.vue'
    export default {
      data: function () {
        return {
          text: ''
        }
      },
      components: {
        son: son
      },
      methods: {
        getSonText (text) {
          this.text = text
        }
      }
    }
    
    </script>
     
    <style scoped>
    #father div {
      padding: 10px;
      margin: 10px;
      border: 1px solid grey;
      overflow: hidden;
    }
    </style>

![复制代码][copycode.gif]

子组件：

![复制代码][copycode.gif]

<template>
      <div>
        <p>我是子组件,我所拥有的数据： {
          { text }}</p>
        <button @click="sendData">
          发送数据
        </button>
      </div>
    </template>
     
    <script>
    export default {
      data () {
        return {
          text: '来自子组件的数据'
        }
      },
      methods: {
        sendData () {
          this.$emit('sendData', this.text)
        }
      }
    }
    </script>
     
    
    <style scoped>
       button { float: left }
    </style>

![复制代码][copycode.gif]

在点击子组件中的“发送数据”按钮前， 父组件还没有接受到数据(text为空字符串)，** 则通过  \{ \{ text || '暂无数据'  \}\}将显示默认文本：‘暂无数据’**

![1060770-20170904135919913-574638178.png][]  
点击“发送数据”按钮后:

![1060770-20170904135946882-2121365807.png][]

因为sendData自定义事件被触发，通过

this.$emit('sendData', this.text)   //此处的this指向子组件实例）

子组件的text数据被父组件中：

中的getSonText函数作为参数接传参受到， 从而完成了从子组件向父组件中的传参过程

### 三. 通过ref属性在父组件中直接取得子组件的数据（data） ###

对于我们上面讲的一和二的处理情景来说，有个局限性就是它们都需要以事件机制为基础（无论是像click那样的原生事件还是自定义事件），而在事件发生的时候才能调用函数将数据传递过来  
  
**但如果子组件里没有类似“按钮”的东西，因而无法制造原生事件，同时也没办法找到一个触发自定义事件的时机的时候，怎么从子组件向父组件传递数据呢？？**  
  
这个时候， **我们就只能从父组件中“直接取”子组件的数据了，借助ref属性**  
  
ref是我们经常用到的Vue属性，利用它可以简单方便地从本组件的template中取得DOM实例，**而实际上，如果你在父组件中为子组件设置ref的话， 就可以直接通过vm.$refs.\[子组件的ref\].\[子组件的属性\]去拿到数据啦**，例如：  
  
父组件：

![复制代码][copycode.gif]

<template>
      <div id="father">
        <div>
           我是父组件,我接受到了：
          {
          { text || '暂无数据'  }}
          <button @click="getSonText()">接受数据</button>
          <son ref='son'></son>
        </div>
      </div>
    </template>
     
    <script>
    import son from './son.vue'
    export default {
      data: function () {
        return {
          text: ''
        }
      },
      components: {
        son: son
      },
      methods: {
        getSonText () {
          this.text = this.$refs.son.text
        }
      }
    }
    
    </script>
     
    <style scoped>
    #father div {
      padding: 10px;
      margin: 10px;
      border: 1px solid grey;
      overflow: hidden;
    }
    </style>

![复制代码][copycode.gif]

子组件：

![复制代码][copycode.gif]

<template>
      <div>
        <p>我是子组件,我所拥有的数据： {
          { text }}</p>
      </div>
    </template>
     
    <script>
    export default {
      data () {
        return {
          text: '来自子组件的数据'
        }
      }
    }
    </script>
     
    
    <style scoped>
       button { float: left }
    </style>

![复制代码][copycode.gif]

demo:  
尚未点击“接受数据”按钮前：

![1060770-20170904140038147-1656819094.png][]

点击接受数据按钮后：

![1060770-20170904140057960-1029107389.png][]

[回到顶部][Link 3]

## 通过sync实现数据双向绑定， 从而同步父子组件数据 ##

通过以上三种方式， 我想你应该能解决绝大多数父子组件通信的场景了，但让我们再仔细考虑一下上面的通信场景，就会发现**它们还可能存在的问题：**

**从子组件向父组件传递数据时，父子组件中的数据仍不是每时每刻都同步的**

但**在某些特殊的需求场景下，我们可能会希望父子组件中的数据时刻保持同步**， 这时候你可能会像下面这样做：  
  
这是父组件中的template:

在子组件中， 我们通过props声明的方式接收foo并使用

props: {
         foo: [type]
    }

同时每当子组件中数据改变的时候,通过

this.$emit('update', newValue)

把参数newValue传递给父组件template中监听函数中的"val"。然后通过

val => bar = val

这个表达式就实现了bar = newValue. 这个时候，我们发现父组件中的关键数据bar被子组件改变（相等）了！   
  
**通过数据的双向绑定， 父（组件）可以修改子的数据， 子也可以修改父的数据**  
  
Vue提供了sync修饰符简化上面的代码，例如：

会被扩展为：

然后你需要在子组件中改变父组件数据的时候， 需要触发以下的自定义事件:

this.$emit("update:foo", newValue)

**【注意】你可能觉得这好像和我上面提到的二中的“通过自定义事件（emit）从子组件向父组件中传递数据”的那一节的内容似乎重叠了，。**  
  
**然而并不是， 两者有着父子组件关系上的不同， 下面我通过一行关键的代码证明它们的区别所在**  
  
**1.**在我们讲解sync的这一小节里， 自定义事件发生时候运行的响应表达式是：  
<son :foo="bar" v-on:update="val => bar = val"></son> 中的 "val => bar = val"  
**2.**在二中的“通过自定义事件从子组件向父组件中传递数据” 里，自定义事件发生时候运行的响应表达式是:  
<Son  v-on: eventYouDefined = "arg => functionYours(arg)" /> 中的 "arg => functionYours(arg)"  
  
对前者， **表达式 val => bar = val意味着强制让父组件的数据等于子组件传递过来的数据**， 这个时候，我们发现**父子组件的地位是平等的。 父可以改变子（数据）， 子也可以改变父（数据）**  
  
对后者， **你的functionYours是在父组件中定义的， 在这个函数里， 你可以对从子组件接受来的arg数据做任意的操作或处理**，** 决定权完全落在父组件中， 也就是：  父可以改变子（数据）， 但子不能直接改变父（数据）！， 父中数据的变动只能由它自己决定**  
  
下面是一个展示demo:  
  
父组件：

![复制代码][copycode.gif]

<template>
      <div id="father">
        <div>
           我是父组件
          <son
            :wisdom.sync="wisdom"
            :magic.sync="magic"
            :attack.sync="attack"
            :defense.sync="defense">
          </son>
          <p>智力： {
          { wisdom }}</p>
          <p>膜法： {
          { magic }}</p>
          <p>攻击： {
          { attack }}</p>
          <p>防御： {
          { defense }}</p>
        </div>
      </div>
    </template>
     
    <script>
    import son from './son.vue'
    export default {
      data: function () {
        return {
          wisdom: 90,
          magic: 160,
          attack: 100,
          defense: 80
        }
      },
      components: {
        son: son
      }
    }
    
    </script>
     
    <style scoped>
    #father div {
      padding: 10px;
      margin: 10px;
      border: 1px solid grey;
      overflow: hidden;
    }
    </style>

![复制代码][copycode.gif]

子组件：

![复制代码][copycode.gif]

<template>
      <div>
        <p>我是子组件</p>
        <p>智力： {
          { wisdom }}</p>
        <p>膜法： {
          { magic }}</p>
        <p>攻击： {
          { attack }}</p>
        <p>防御： {
          { defense }}</p>
        <button @click="increment('wisdom')">增加智力</button>
        <button @click="increment('magic')">增加膜法</button>
        <button @click="increment('attack')">增加攻击</button>
        <button @click="increment('defense')">增加防御</button>
      </div>
    </template>
     
    <script>
    export default {
      props: {
        wisdom: Number,
        magic: Number,
        attack: Number,
        defense: Number
      },
    
      methods: {
        increment (dataName) {
          let newValue = this[dataName] + 1
          this.$emit(`update:${dataName}`, newValue)
        }
      }
    }
    </script>
     
    
    <style scoped>
       button { float: left }
    </style>

![复制代码][copycode.gif]

点击前：  
![1060770-20170904140150960-1016059567.png][]

点击增加子组件中“增加智力”按钮的时候， 父组件和子组件中的智力参数同时从90变为91

![1060770-20170904140209272-1398359235.png][]  
点击增加子组件中“增加膜法”按钮的时候， 父组件和子组件中的智力参数同时从160变为161  
![1060770-20170904140222069-1730552299.png][]

[回到顶部][Link 3]

## 数据双向绑定是把双刃剑 ##

**从好处上看：**   
**1.**它实现了父子组件数据的“实时”同步， 在某些数据场景下可能会使用到这一点  
**2.**sync提供的语法糖使得双向绑定的代码变得很简单

**从坏处上看：**  
它破环了单向数据流的简洁性， 这增加了分析数据时的难度

[回到顶部][Link 3]

## 当sync修饰的prop是个对象 ##

我们对上面的例子修改一下， 把数据包裹在一个对象中传递下来：  
  
父组件

![复制代码][copycode.gif]

<template>
      <div id="father">
        <div>
           我是父组件
          <son :analysisData.sync="analysisData">
          </son>
          <p>智力： {
          { analysisData.wisdom }}</p>
          <p>膜法： {
          { analysisData.magic }}</p>
          <p>攻击： {
          { analysisData.attack }}</p>
          <p>防御： {
          { analysisData.defense }}</p>
        </div>
      </div>
    </template>
     
    <script>
    import son from './son.vue'
    export default {
      data: function () {
        return {
          analysisData: {
            wisdom: 90,
            magic: 160,
            attack: 100,
            defense: 80
          }
        }
      },
      components: {
        son: son
      }
    }
    
    </script>
     
    <style scoped>
    #father div {
      padding: 10px;
      margin: 10px;
      border: 1px solid grey;
      overflow: hidden;
    }
    </style>

![复制代码][copycode.gif]

子组件：

![复制代码][copycode.gif]

<template>
      <div>
        <p>我是子组件</p>
        <p>智力： {
          { analysisData.wisdom }}</p>
        <p>膜法： {
          { analysisData.magic }}</p>
        <p>攻击： {
          { analysisData.attack }}</p>
        <p>防御： {
          { analysisData.defense }}</p>
        <button @click="increment('wisdom')">增加智力</button>
        <button @click="increment('magic')">增加膜法</button>
        <button @click="increment('attack')">增加攻击</button>
        <button @click="increment('defense')">增加防御</button>
      </div>
    </template>
     
    <script>
    export default {
      props: {
        analysisData: Object
      },
    
      methods: {
        increment (dataName) {
          let newObj = JSON.parse(JSON.stringify(this.analysisData))
          newObj[dataName] += 1
          this.$emit('update:analysisData', newObj)
        }
      }
    }
    </script>
     
    
    <style scoped>
       button { float: left }
    </style>

![复制代码][copycode.gif]

** demo同上**

[回到顶部][Link 3]

## 不要通过在子组件中修改引用类型props达到“父子组件数据同步”的需求！ ##

父组件的数据传递给子组件， 一般通过props实现， 而在实现“父子组件数据同步”这一需求的时候， 小伙伴们可能会发现一点： 在子组件中修改引用类型的props（如数组和对象）是可行的  
  
**1.不仅可以达到同时修改父组件中的数据（因为本来引用的就是同一个数据）**  
**2.而且还不会被Vue的检测机制发现！（不会报错）**  
  
**但千万不要这样做， 这样会让数据流变得更加难以分析，**如果你尝试这样做， 上面的做法可能会更好一些  
  
**不要这样做，糟糕的做法：**  
  
父组件:

![复制代码][copycode.gif]

<template>
      <div id="father">
        <div>
           我是父组件
          <son :analysisData="analysisData">
          </son>
          <p>智力： {
          { analysisData.wisdom }}</p>
          <p>膜法： {
          { analysisData.magic }}</p>
          <p>攻击： {
          { analysisData.attack }}</p>
          <p>防御： {
          { analysisData.defense }}</p>
        </div>
      </div>
    </template>
     
    <script>
    import son from './son.vue'
    export default {
      data: function () {
        return {
          analysisData: {
            wisdom: 90,
            magic: 160,
            attack: 100,
            defense: 80
          }
        }
      },
      components: {
        son: son
      }
    }
    
    </script>
     
    <style scoped>
    #father div {
      padding: 10px;
      margin: 10px;
      border: 1px solid grey;
      overflow: hidden;
    }
    </style>

![复制代码][copycode.gif]

子组件：

![复制代码][copycode.gif]

<template>
      <div>
        <p>我是子组件</p>
        <p>智力： {
          { analysisData.wisdom }}</p>
        <p>膜法： {
          { analysisData.magic }}</p>
        <p>攻击： {
          { analysisData.attack }}</p>
        <p>防御： {
          { analysisData.defense }}</p>
        <button @click="increment ('wisdom')">增加智力</button>
        <button @click="increment ('magic')">增加膜法</button>
        <button @click="increment ('attack')">增加攻击</button>
        <button @click="increment ('defense')">增加防御</button>
      </div>
    </template>
     
    <script>
    export default {
      props: {
        analysisData: Object
      },
    
      methods: {
        increment (dataName) {
          let obj = this.analysisData
          obj[dataName] += 1
        }
      }
    }
    </script>
     
    
    <style scoped>
       button { float: left }
    </style>

![复制代码][copycode.gif]

**demo同上， 但这并不是值得推荐的做法**

【完】

**![1060770-20170904143644679-1541265391.jpg][]**

其实啊，我只是把你们喝咖啡的时间，都用来喝啤酒而已

标签:  [Vue][]

[« ][Link 4]上一篇： [【javascript】详解变量，值，类型和宿主对象][Link 4]  
[» ][Link 5]下一篇： [【javascript】谈谈HTML5: Web-Worker、canvas、indexedDB、拖拽事件][Link 5]

posted @  2017-09-04 14:10 [外婆的彭湖湾][Link 6] 阅读(12238) 评论(13) [编辑][Link 7] [收藏][Link 8]

转载于:https://www.cnblogs.com/wang-sai-sai/p/10405221.html

[Vue_Vue_sync]: https://www.cnblogs.com/penghuwan/p/7473375.html
[Link 1]: http://www.cnblogs.com/penghuwan/p/7473375.html#_label0
[. _props]: http://www.cnblogs.com/penghuwan/p/7473375.html#_label0_0
[._]: http://www.cnblogs.com/penghuwan/p/7473375.html#_label0_1
[. _ref_data]: http://www.cnblogs.com/penghuwan/p/7473375.html#_label0_2
[sync_]: http://www.cnblogs.com/penghuwan/p/7473375.html#_label1
[Link 2]: http://www.cnblogs.com/penghuwan/p/7473375.html#_label2
[sync_prop]: http://www.cnblogs.com/penghuwan/p/7473375.html#_label3
[props]: http://www.cnblogs.com/penghuwan/p/7473375.html#_label4
[Link 3]: http://www.cnblogs.com/penghuwan/p/7473375.html#_labelTop
[http_www.cnblogs.com_penghuwan_p_7286912.html_label1]: http://www.cnblogs.com/penghuwan/p/7286912.html#_label1
[copycode.gif]: /images/20211214/8cb6c559ad8a4421a008f09cf9896e9d.png
[1060770-20170904135919913-574638178.png]: /images/20211214/63e8c7cb63724f67bad93da841eae1b5.png
[1060770-20170904135946882-2121365807.png]: /images/20211214/1690a10243754caa8d8f913f94014b6f.png
[1060770-20170904140038147-1656819094.png]: /images/20211214/7d9c535c8188481d9deea14c8037fc09.png
[1060770-20170904140057960-1029107389.png]: /images/20211214/5d3fe9e6f853418391dff2ef54af3b84.png
[1060770-20170904140150960-1016059567.png]: /images/20211214/27281608bc6e469facb866cf28e97d59.png
[1060770-20170904140209272-1398359235.png]: /images/20211214/74b1946bcdfb4933b0210b3678633952.png
[1060770-20170904140222069-1730552299.png]: /images/20211214/fc73b4042f2b4364a0266bdc6854d8df.png
[1060770-20170904143644679-1541265391.jpg]: /images/20211214/cf825a3abfa14d67b03955e82c06240b.png
[Vue]: https://www.cnblogs.com/penghuwan/tag/Vue/
[Link 4]: https://www.cnblogs.com/penghuwan/p/7466739.html
[Link 5]: https://www.cnblogs.com/penghuwan/p/7492814.html
[Link 6]: https://www.cnblogs.com/penghuwan/
[Link 7]: https://i.cnblogs.com/EditPosts.aspx?postid=7473375
[Link 8]: http://www.cnblogs.com/penghuwan/p/7473375.html#