单向数据流：父组件值的更新，会影响到子组件，反之则不行；

修改子组件的值：

局部数据：在子组件中定义新的数据，将父组件传过来的值赋值给新定义的数据，之后操作这个新数据；

如果对数据进行简单的操作，可以使用计算属性；

由效果图可知，父组件值的更新，会影响到子组件，而子组件值的更新时，控制台会报错

此时代码：

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title> 单向数据流</title>
  6.          <script type="text/javascript" src="../js/vue.js" ></script>
  7.      </head>
  8.      <body>
  9.          <div>
  10.              <father-component ></father-component>
  11.              </div>
  12.      </body>
  13.      <template id="father-template">
  14.          <div>
  15.          <h2> 父组件</h2>
  16.          myData:<span>{{name}}</span><br />
  17.  
  18.          <input type="text"  v-model="name"/>
  19.          <hr />
  20.        <child-component :name="name" ></child-component>
  21.          </div>
  22.      </template>
  23.      <template id="child-template">
  24.          <div>
  25.              <p> 子组件</p>
  26.              fatherData:<span >{{name}}</span>
  27.              <input type="text"  v-model="name"/>
  28.  
  29.          </div>
  30.  </template>
  31.      <script>
  32.  
  33.          new Vue({
  34.  
  35.              data:{
  36.  
  37.             },
  38.              components:{
  39.                      "father-component":{
  40.                          data(){
  41.                              return{
  42.  
  43.                                  name:'perfect',
  44.  
  45.                              }
  46.                          },
  47.                          props:['msg'],
  48.                          template:'#father-template',
  49.  
  50.                          components:{
  51.                              "child-component":{
  52.  
  53.                                  template:'#child-template',
  54.                              props:['name']
  55.                              }
  56.                          },
  57.  
  58.                      }
  59.                  }
  60.  
  61.          }).$mount('div');
  62.      </script>
  63.  </html>

父组件值的更新，会影响到子组件，而子组件值的更新时，控制台会报错

每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

解决方法：

首先由于这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值：

相当于定义一个局部变量：

这样就可以不影响了；

在子组件中定义如下：

  1. components:{
  2.                             "child-component":{
  3.  
  4.                                 template:'#child-template',
  5.                             props:['name'],
  6.                             data(){
  7.  
  8.                                 return{
  9.                                     childName:this.name
  10.                                 }
  11.                             }
  12.                             }

进行调用的demo如下：

  1. <template id="child-template">
  2.         <div>
  3.             <p> 子组件</p>
  4.             fatherData:<span >{{childName}}</span>
  5.             <input type="text"  v-model="childName"/>
  6.  
  7.         </div>
  8. </template>

2、这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：

比如说小写转大写：

  1. components:{
  2.                             "child-component":{
  3.  
  4.                                 template:'#child-template',
  5.                             props:['name'],
  6.                             data(){
  7.  
  8.                                 return{
  9.                                     childName:this.name
  10.                                 }
  11.                             },
  12.                             computed:{//计算属性的值
  13.  
  14.                                 childUpperName(){
  15.                                     return this.name.toString().toUpperCase();
  16.                                 }
  17.                             }
  18.                             }
  19.                         }
  1. <template id="child-template">
  2.         <div>
  3.             <p> 子组件</p>
  4.             fatherData:<span >{{childUpperName}}</span>
  5.             <input type="text"  v-model="childUpperName"/>
  6.  
  7.         </div>
  8. </template>

由图知计算属性仍然不能直接修改父组件中name的值

上述实例的总的代码：

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title> 单向数据流</title>
  6.          <script type="text/javascript" src="../js/vue.js" ></script>
  7.      </head>
  8.      <body>
  9.          <div>
  10.              <father-component ></father-component>
  11.              </div>
  12.      </body>
  13.      <template id="father-template">
  14.          <div>
  15.          <h2> 父组件</h2>
  16.          myData:<span>{{name}}</span><br />
  17.  
  18.          <input type="text"  v-model="name"/>
  19.          <hr />
  20.        <child-component :name="name" ></child-component>
  21.          </div>
  22.      </template>
  23.      <template id="child-template">
  24.          <div>
  25.              <p> 子组件</p>
  26.              fatherData:<span >{{childUpperName}}</span>
  27.              <input type="text"  v-model="childUpperName"/>
  28.  
  29.          </div>
  30.  </template>
  31.      <script>
  32.  
  33.          new Vue({
  34.  
  35.              data:{
  36.  
  37.             },
  38.              components:{
  39.                      "father-component":{
  40.                          data(){
  41.                              return{
  42.  
  43.                                  name:'perfect',
  44.  
  45.                              }
  46.                          },
  47.                          props:['msg'],
  48.                          template:'#father-template',
  49.  
  50.                          components:{
  51.                              "child-component":{
  52.  
  53.                                  template:'#child-template',
  54.                              props:['name'],
  55.                              data(){
  56.  
  57.                                  return{
  58.                                      childName:this.name
  59.                                  }
  60.                              },
  61.                              computed:{//计算属性的值
  62.  
  63.                                  childUpperName(){
  64.                                      return this.name.toString().toUpperCase();
  65.                                  }
  66.                              }
  67.                              }
  68.                          }
  69.  
  70.                      }
  71.                  }
  72.  
  73.          }).$mount('div');
  74.      </script>
  75.  </html>

单向数据流

下面介绍如何修改子组件的值同步到父组件中

单向数据流子组件数据同步到父组件

修改子组件的prop，同步到父组件：

1、使用.sync修饰符；

在子组件中写入这个函数：

  1.  //数据发生改变就会进行调用
  2.                             updated(){
  3.                                     console.log(this.childName);
  4.                                 this.$emit("update:name", this.childName);
  5.                             },

使用修饰符代码：

  1. <template id="father-template">
  2.         <div>
  3.         <h2> 父组件</h2>
  4.         myData:<span>{{name}}</span><br />
  5.  
  6.         <input type="text"  v-model="name"/>
  7.         <hr />
  8.       <child-component :name.sync="name" ></child-component>
  9.         </div>
  10.     </template>
  11.     <template id="child-template">
  12.         <div>
  13.             <p> 子组件</p>
  14.             fatherData:<span >{{childName}}</span>
  15.             <input type="text"  v-model="childName"/>
  16.  
  17.         </div>
  18. </template>

2、将要操作的数据封装成一个对象再操作，进行数据的双向绑定：

使用的vue代码：进行在父组件中定义一个对象user，

  1. components:{
  2.                     "father-component":{
  3.                         data(){
  4.                             return{
  5.  
  6.                                 name:'perfect',
  7.                                 user:{
  8.  
  9.                                     id:
  10.                                 }
  11.  
  12.                             }
  13.                         },

进行调用使用：

  1. <template id="father-template">
  2.         <div>
  3.         <h2> 父组件</h2>
  4.         name:<span>{{name}}</span><br />
  5.  
  6.         <input type="text"  v-model="name"/>
  7.         <hr />
  8.  
  9.         userID:<span>{{user.id}}</span><br />
  10.  
  11.         <input type="text"  v-model="user.id"/>
  12.         <hr />
  13.       <child-component :name.sync="name" :user="user"></child-component>
  14.         </div>
  15.     </template>
  16.     <template id="child-template">
  17.         <div>
  18.             <p> 子组件</p>
  19.             fatherData:<span >{{childName}}</span><br />
  20.             <input type="text"  v-model="childName"/><br />
  21.             <hr />
  22.             userID:<span>{{user.id}}</span><br />
  23.  
  24.         <input type="text"  v-model="user.id"/>
  25.  
  26.         </div>
  27. </template>

总的代码：

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title> 单向数据流子组件数据同步到父组件</title>
  6.          <script type="text/javascript" src="../js/vue.js" ></script>
  7.      </head>
  8.      <body>
  9.          <div>
  10.              <father-component ></father-component>
  11.              </div>
  12.      </body>
  13.      <template id="father-template">
  14.          <div>
  15.          <h2> 父组件</h2>
  16.          name:<span>{{name}}</span><br />
  17.  
  18.          <input type="text"  v-model="name"/>
  19.          <hr />
  20.  
  21.          userID:<span>{{user.id}}</span><br />
  22.  
  23.          <input type="text"  v-model="user.id"/>
  24.          <hr />
  25.        <child-component :name.sync="name" :user="user"></child-component>
  26.          </div>
  27.      </template>
  28.      <template id="child-template">
  29.          <div>
  30.              <p> 子组件</p>
  31.              fatherData:<span >{{childName}}</span><br />
  32.              <input type="text"  v-model="childName"/><br />
  33.              <hr />
  34.              userID:<span>{{user.id}}</span><br />
  35.  
  36.          <input type="text"  v-model="user.id"/>
  37.  
  38.          </div>
  39.  </template>
  40.      <script>
  41.  
  42.          new Vue({
  43.  
  44.              data:{
  45.  
  46.             },
  47.              components:{
  48.                      "father-component":{
  49.                          data(){
  50.                              return{
  51.  
  52.                                  name:'perfect',
  53.                                  user:{
  54.  
  55.                                      id:
  56.                                  }
  57.  
  58.                              }
  59.                          },
  60.  
  61.                          template:'#father-template',
  62.  
  63.                          components:{
  64.                              "child-component":{
  65.  
  66.                                  template:'#child-template',
  67.                              props:['name','user'],
  68.                              data(){
  69.  
  70.                                  return{
  71.                                      childName:this.name
  72.                                  }
  73.                              },
  74.  
  75.                              //数据发生改变就会进行调用
  76.                              updated(){
  77.                                      console.log(this.childName);
  78.                                  this.$emit("update:name", this.childName);
  79.                              },
  80.                              computed:{//计算属性的值
  81.  
  82.                                  childUpperName(){
  83.                                      return this.name.toString().toUpperCase();
  84.                                  }
  85.  
  86.                              }
  87.                              }
  88.                          }
  89.  
  90.                      }
  91.                  }
  92.  
  93.          }).$mount('div');
  94.      </script>
  95.  </html>

单向数据流子组件数据同步到父组件

Vue 组件&组件之间的通信 之 单向数据流的更多相关文章

  1. vue第九单元(非父子通信 events 单向数据流)

    第九单元(非父子通信 events 单向数据流) #课程目标 了解非父子组件通信的原理,熟练实现非父子组件间的通信(重点) 了解单向数据流的含义,并且明白单向数据流的好处 #知识点 #1.非父子组件间 ...

  2. vue组件父子之间相互通信案例

  3. Vue中组件之间的通信方式

    vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 本文会介绍组件间通信的8种方式如下图所示, 并介绍在不同的场景下如何选择有效方式实现的 ...

  4. Vue组件-组件组合

    组件设计初衷就是要配合使用的,最常见的就是形成父子组件的关系:组件 A 在它的模板中使用了组件 B. <html> <head> <title>Vue组件 A 在它 ...

  5. 在vue中子组件修改props引发的对js深拷贝和浅拷贝的思考

    不管是react还是vue,父级组件与子组件的通信都是通过props来实现的,在vue中父组件的props遵循的是单向数据流,用官方的话说就是,父级的props的更新会向下流动到子组件中,反之则不行. ...

  6. linux之间进程通信

    进程间通信方式:                    同主机进程间数据交换机制: pipe(无名管道) / fifo(有名管道)/ message queue(消息队列)和共享内存. 必备基础: f ...

  7. 【转】vue父子组件之间的通信

    vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...

  8. vue组件之间的通信，父子之间的数据通信

    父子组件之间的通信问题既可以传递数据也可以传递变量,父组件传递数据给子组件可以使用props,子组件传递数据给父组件则可以自定义函数来监听子组件的事件发射器. 首先说说组件注册,组件的注册分为全局注册 ...

  9. Vue.js组件之同级之间的通信

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 107个JS常用方法（持续更新中）

    1.输出语句:document.write(""); 2.JS中的注释为//3.传统的HTML文档顺序是:document->html->(head,body)4.一个 ...

  2. linux 的基础命令

    date  查看时间 cal 查看日历    cal 2009    cal 10 2019  ls 查看目录下的内容     ls -alh  tree  以树的形式查看目录内容 bc  计算器 M ...

  3. 与PON相关的abbreviation

    AAL:Asynchronous transfer mode Adaptation Layer 异步传输适配层 ACS:Autoconfiguration Server 自动配置服务 ADSL:Asy ...

  4. git rebase和git merge的用法

    http://softlab.sdut.edu.cn/blog/subaochen/2016/01/git-rebase%E5%92%8Cgit-merge%E7%9A%84%E7%94%A8%E6% ...

  5. js自定义格式化时间戳的格式

    题目为 : 写一个模块,外部调用这个模块,请求参数是时间戳,模块要求 今天的时间,统一用24小时写作 03:00.15:04 昨天的时间,统一写昨天 昨天之前的时间,但在本周之内的时间,统一用周一.周 ...

  6. [vue开发记录]vue仿ios原生datepicker实现

    先上个效果图 现在只开发了年月,还在优化. 在网上看了一个纯原生js实现实现惯性滚动和回弹的文章  地址:https://www.cnblogs.com/ranyonsue/p/8119155.htm ...

  7. html转markdown网站

    戳下面的链接,可以直接复制富文本粘贴编程markdown: https://euangoddard.github.io/clipboard2markdown/

  8. Mybatis-Plus 3.0代码生成器

    package com.kyplatform.generator; import com.baomidou.mybatisplus.core.exceptions.MybatisPlusExcepti ...

  9. OC 应用跳转QQ私聊界面或者申请加群

    申请加群 NSString *qq_number = QQ; NSString* urlStr = [NSString stringWithFormat:@"mqqapi://card/sh ...

  10. 2018-2019-2 网络对抗技术 20165236 Exp6 信息搜集与漏洞扫描

    2018-2019-2 网络对抗技术 20165236 Exp6 信息搜集与漏洞扫描 一.实验内容 1.实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 2.实践内容 (1)各种搜索技巧的应用 ...