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

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

实现思路：

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

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

一、父子组件单向传值

1.1、父向子传值

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

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

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

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

    1.2、子向父传值

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

     
 
 
      
  
  
  
    1. // 父组件内容 
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3.  子组件获取到的数据{{getNum}} 
      4. 
  
  
  
    4.   
      5.
     
  •  
  • //父组件方法 
  • methods:{ 
  •  getNumC(data){ 
  •   this.getNum = data //接收子组件传的数据 
  •  } 
  • }, 
  • //子组件定义 
  • components:{ 
  •  cld:{ 
  •   template:'#child', 
  •   data(){ 
  •    return{ 
  •     numC:1314 //子组件数据定义 
  •    } 
  •   }, 
  •   mounted(){ 
  •     this.$emit( 'accept' , this.numC ) // 触发自定义事件 
  •    } 
  •   } 
  • }, 

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

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

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

      
 
 
      
   
  
  
    1.  
      2. 
   
  
  
    2.  数据
      {{num}} 
      3. 
   
  
  
    3.  
       
      4. 
   
  
  
    4.   
      5.
     
  • //子组件内容 
  •  
  •  
     
  •   数据
    {{childNum}} 
  •    
  •   
  •  
  •  
  •    
  • const app = new Vue({ 
  •  el:'#app', 
  •   data:{ 
  •    num:'520', 
  •    }, 
  •   methods:{ 
  •    getNumC(data){ 
  •     this.num = data 
  •    } 
  •   }, 
  •   components:{ 
  •    cld:{ 
  •     template:'#child', 
  •     props:{ 
  •      numb:String 
  •     }, 
  •    data(){ 
  •     return{ 
  •      childNum:0, 
  •     } 
  •    }, 
  •   watch:{ 
  •    numb:function(){ 
  •     this.childNum = this.numb 
  •    }, 
  •    childNum:function(){ 
  •     this.$emit('accept',this.childNum) 
  •     } 
  •    }, 
  •   mounted(){ 
  •    this.childNum = this.numb 
  •    } 
  •   } 
  •  }  
  • }) 

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

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

     
 
 
      
  
  
  
    1.  
      2. 
  
  
  
    2. //会扩展为： 
      3. 
  
  
  
    3.  bar = val”/> 
      4.

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

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

    使用具体实例如下：

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

    网页名称：前端框架Vue—父子组件数据双向绑定
    链接地址：http://www.csdahua.cn/qtweb/news44/374094.html

    网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

    成都快上网为您推荐相关内容

    动态网站知识

    分类信息网

    成都商城网站开发　　 　网站seo优化　　 　成都展柜制作　　 　移动APP　　 　虚拟主机　　 　广告品牌策划设计　　 　手机网站制作　　 　南充护栏钻孔机　　 　企业手机网站建设　　 　成都画册制作　　 　成都网站建设　　 　成都网站改版　　 　南充网站制作　　 　成都服务器租用　　 　seo优化排名　　 　成都酒店服定制　　 　精灵网　　 　做网站　　 　犀浦门窗定制　　 　德昌麦琪建站