前端框架Vue—父子组件数据双向绑定

Vue项目中经常使用到组件之间的数值传递，实现的方法很多，但是原理上基本大同小异。

实现思路：

父 向 子 组件传值：使用 props 属性。( props 是property[属性] 的复数简写 )

子 向 父 组件传值：使用自定义事件。

一、父子组件单向传值

1.1、父向子传值

父向子组件传值，子组件接收到数据之后，保存到自己的变量中。

1. //父组件写法 
2. <cld :numP="num" ></cld> 
3.  
4. //子组件定义以及数据 
5. components:{ 
6.  cld:{ 
7.   template:'#child', 
8.   props:{ 
9.    numP:Number 
10.   }, 
11.  } 
12. } 
13.  
14. //子组件内容 
15. <template id="child"> 
16.  <div> 
17.   {{ numP }} 
18.  </div> 
19. </template> 

props 用于接收父组件传过来的值，props 的写法有很多种，具体如：

1. //方式1 ：  直接接收数据 
2. props: [ 'numP' ] 
3.  
4. //方式2： 加类型限制 
5. props: [ 
6.  numP: Number 
7.  ]  
8.  
9. //方式3：添加默认值 
10. props: [ 
11.  numP: { 
12.   type:Number, 
13.   default:0 
14.   } 
15. ]  
16.  
17. //方式4：是否必须值限制 
18. props: [ 
19.  numP: { 
20.   type:Number, 
21.   default:0, 
22.   require:true //添加必须值，不传此值会报错 
23.  } 
24. ]  
25.  
26. //方式5：采用对象形式 
27. props: { 
28.  numP: { 
29.   type:Number, 
30.   default:0, 
31.  } 
32. } 

1.2、子向父传值

子向父组件传值，主要通过自定义事件进行传值，具体实例如下：

1. // 父组件内容 
2. <div> 
3.  子组件获取到的数据{{getNum}} 
4.  <cld :numb="num" @accept="getNumC"></cld> 
5. </div> 
6.  
7. //父组件方法 
8. methods:{ 
9.  getNumC(data){ 
10.   this.getNum = data //接收子组件传的数据 
11.  } 
12. }, 
13. //子组件定义 
14. components:{ 
15.  cld:{ 
16.   template:'#child', 
17.   data(){ 
18.    return{ 
19.     numC:1314 //子组件数据定义 
20.    } 
21.   }, 
22.   mounted(){ 
23.     this.$emit( 'accept' , this.numC ) // 触发自定义事件 
24.    } 
25.   } 
26. }, 

二、父子组件数据双向绑定

Vue 的数据都是单向流动的，而且 vue 中从来就没有任何的双向绑定，v-model 实现的双向绑定只是语法糖而已。

方式1：利用 watch 实现父子组件的数据双向绑定，具体实例如下：

1. <div id="app"> 
2.  数据<br>{{num}} 
3.  <input type="text" v-model="num"><br> 
4.  <cld :numb="num" @accept="getNumC"></cld> 
5. </div> 
6. //子组件内容 
7. <template id="child"> 
8.  <div> 
9.   数据<br>{{childNum}} 
10.   <input type="text" v-model="childNum" /> 
11.  </div> 
12. </template> 
13.  
14.   <!-- 父子组件通信 --> 
15. const app = new Vue({ 
16.  el:'#app', 
17.   data:{ 
18.    num:'520', 
19.    }, 
20.   methods:{ 
21.    getNumC(data){ 
22.     this.num = data 
23.    } 
24.   }, 
25.   components:{ 
26.    cld:{ 
27.     template:'#child', 
28.     props:{ 
29.      numb:String 
30.     }, 
31.    data(){ 
32.     return{ 
33.      childNum:0, 
34.     } 
35.    }, 
36.   watch:{ 
37.    numb:function(){ 
38.     this.childNum = this.numb 
39.    }, 
40.    childNum:function(){ 
41.     this.$emit('accept',this.childNum) 
42.     } 
43.    }, 
44.   mounted(){ 
45.    this.childNum = this.numb 
46.    } 
47.   } 
48.  }  
49. }) 

方式2：.sync 修饰符实现双向绑定

在vue 1.x 中的 .sync 修饰符所提供的功能。当一个子组件改变了一个带 .sync 的 prop 的值时，这个变化也会同步到父组件中所绑定的值。这很方便，但也会导致问题，因为它破坏了单向数据流。(数据自上而下流，事件自下而上走)

1. <cld :numb.sync="num" ></cld> 
2. //会扩展为： 
3. <cld  :numb="bar"  @update:numb=”val => bar = val”/> 

当组件需要更新 numb 的值时，需要触发更新事件：

1. this.$emit("update:numb", newValue ); 

使用具体实例如下：

1. // 父组件 
2. <Father :foo.sync="foo"></Father> 
3.  
4. //子组件 
5. props: ['foo'], 
6. data() { 
7.   return { 
8.    newFoo: this.foo; 
9.    } 
10. }, 
11. methods:{ 
12.  add:function(){ 
13.   this.newMsg=10; 
14.   this.$emit('update:foo',this.newFoo); 
15.  } 
16. } 

原文链接：https://www.toutiao.com/a7005375174686114340/