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

时间:2022-11-20 14:16:32

前端框架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. <template id="child"
  15.  <div> 
  16.   {{ numP }} 
  17.  </div> 
  18. </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.  } 

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.  } 

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