Vue组件之单向数据流的解决方法

子组件能够通过自身的props选项获取父组件上的数据，但是在默认情况下，props是单向绑定的---当父组件数据（属性）发生变化的时候会传递给子组件，引起子组件的变化，但不能反过来并且不允许子组件直接改变父组件的数据，会报错的。例如：

也就是说当通过一种方法改变父组件数据的时候，子组件与之相关联的props数据也会发生改变，从而影响子组件，但是子组件直接改变从父组件拿过来的props数据却不能影响父组件的原始数据。也就是说一般情况下只能是“父影响子，而不是子影响父”。

两种情况：

1.如果子组件想将从父组件获得的数据作为局部数据来使用，可以将其给保存到子组件的局部变量data中（子组件中的变量），不影响父组件的数据；例如：

data:function(){                return {                  weather:{                    tempre:"22.3℃",                    weth:"rain",                    wind:this.ser                  }                }              },

这里的this.sers就是来源于子组件的props数据。

2.如果子组件想修改数据并且同步更新到父组件，两种解决方式

第一种：使用.sync加上显式触发的一个事件this.$emit("update:你要更改的props数据", 改变后的值)，也就是在一个事件触发的函数中通过this.$emit("update:你要更改的props数据", 改变后的值)来改变数据；例如：

HTML部分

 <div id= "container" v-cloak>    <my-compon></my-compon>  </div>  <!-- 父组件模板 -->  <template id="myComp">    <div>      <h3>大家好，我是{{animal.name}}猫，我已经和Jerry斗争了{{animal.age}}年了</h3> 给绑定的数据使用.sync修饰符      <my-comp-son v-bind:animalage.sync="animal.age"></my-comp-son>    </div>  </template>  <!-- 子组件模板 -->  <template id="myCompSon">    <div>      <h4>一只皮毛是{{dog.hair}}色，身高是{{dog.height}}的狗狗,在散步。。。</h4>      <h3>今天的天气：{{weather.weth}},风力{{weather.wind}},温度{{weather.tempre}},{{animalname}},{{animalage}}</h3>      <button @click = "changeFatDaAge">点击父组件中的数据会跟着改变方式一</button>     </div>   </template>

JS部分

var app = new Vue({      el:"#container",      data:{        house:{          date:"2017-10-10",          area:"144m²",          floor:6,        },        carBrand:"Benzi"      },      components:{        "my-compon":{//父组件          template:"#myComp",          data:function(){            return {              animal:{                name:"Tom",                age:3,                skin:"black"              },              shoe:"鸿星尔克",              dog:{                hair:"brown",                height:1.25              }            }          },          methods: {            changeData:function () {//这里的this指的是当前父组件的实例              this.animal.name = "Kitty"//改变父组件中的数据            }          },          components:{            "my-comp-son":{//子组件              template:"#myCompSon",              props:["animalname","animalage","dog"],//地位和data一样，获取方式也是一样              data:function(){                return {                  weather:{                    tempre:"22.3℃",                    weth:"rain",                    wind:"3级"                  }                }              },              methods:{                // 给v-bind使用修饰符.sync,需要显式地触发一个更新事件（this.$emit("update:你要更改的props数据", 改变后的值)）                changeFatDaAge:function(){                  // this.animalage = 19;                  this.$emit("update:animalage", 19)//通过这个方法来改变子组件props数据，并引起父组件相应数据的改变                }              }            }          }        }      }    })