Vue 组件（三）：关于单向数据流的简单理解
单向绑定和双向绑定
单双向绑定，指的是 view层和 model 层之间的映射关系
Vue 在数据操作上支持单向绑定和双向绑定：
- 单向绑定：例如 Mustache 插值语法，
v-bind等； - 双向绑定：即表单的
v-model。它实际上是一个语法糖，背后包括两步操作：v-bind:value：model 层的更改同步到 view 层v-on:input：view 层的更改同步到 model 层
单向数据流
数据流，指的是组件之间的数据流动
虽然 v-model 是双向绑定，但 Vue 实际上是单向数据流。我们看一个例子：
假设现在想要用子组件的 prop 做一个双向绑定，那么我们的代码可能会这么写：
<div id="app">
<cpn v-bind:value2="value"></cpn>
</div>
<template id="cpn">
<input type="text" v-model="value2">
<h2>{{value2}}</h2>
</template>const cpn = {
template:"#cpn",
props:["value2"]
}
const app = new Vue({
el:'#app',
data:{
value:0
},
components:{
cpn
}
})我们会发现 model 层的确随着 view 层同步改变了，但是控制台里会报错：
实际上，prop 就应该是父组件传过来的原始数据，但是我们试图通过子组件的 v-model 去改变这个 prop，也就是试图通过子组件直接去改变父组件的数据（而不是通过发送事件的方式），这是不允许的，因为 Vue 是单向数据流 —— 也就是说，数据总是从父组件传到子组件，子组件没有权利修改父组件传过来的数据，只能请求父组件对原始数据进行修改。
这实际上是为了更好的解耦。在开发中可能有多个子组件依赖于父组件的某个数据，万一子组件真的可以直接修改父组件数据，那么一个子组件变化将会引发所有依赖这个数据的子组件发生变化，所以 Vue 不推荐子组件修改父组件的数据，直接修改 prop 会抛出警告。
官方文档也有针对这个问题的解释：
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
但是，很多时候我们又确实要操作这个数据，那么应该怎么办呢？ 有两种方法：
- 定义一个局部变量，并用
prop的值初始化它：
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}- 定义一个计算属性，处理
prop的值并返回：
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}第一个方法相当于创建了原始 prop 的副本了，之后怎么操作数据都是操作的子组件数据，不会影响到父组件数据；第二个方法，注意 trim() 会返回一个处理完成后的新字符串，同样不会影响到父组件数据（原字符串）。之后如果父组件确实要用到这个处理后的值，就通过 $emit 的方式传给父组件即可。
拿前面的例子来说，我们想要利用 prop 这个数据实现双向绑定，可以这么写：
<div id="app">
<cpn v-bind:value2="value"></cpn>
</div>
<template id="cpn">
<input type="text" v-model="value3">
<h2>{{value3}}</h2>
</template>const cpn = {
template:"#cpn",
props:["value2"],
data:{
value3:this.value2
}
}
const app = new Vue({
el:'#app',
data:{
value:0
},
components:{
cpn
}
})这样子就不会报错了，因为现在我们操作的是子组件自己的数据，和 prop 无关。
还要注意一个问题：
注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。
比如下面这段代码：
<div id="app">
<h2>父组件数据：{{parent}}</h2>
<cpn v-bind:obj1="parent"></cpn>
</div>
<template id="cpn">
<div>
<h2>子组件数据：{{son}}</h2>
<input type="text" v-model="son.age">
</div>
</template>const cpn = {
template:"#cpn",
props:["obj1"],
data(){
return {
son:this.obj1
}
}
}
const app = new Vue({
el:'#app',
data:{
parent:{age:20}
},
components:{
cpn
}
})这里的 this.obj1 是引用，赋值给了 son，所以 son 实际上还是指向了父组件的数据，对 son.age 的修改依然会影响到父组件，如图：
所以，我们实际上需要的是一个对象副本。因为对象属性都是基本类型，这里只用浅拷贝即可（如果对象属性还是对象，就得用深拷贝）：
const cpn = {
template:"#cpn",
props:["obj1"],
data(){
return {
// son:this.obj1
son:Object.assign({},this.obj1)
}
}
}之后会发现，子组件的数据操作不再影响到父组件：
参考： https://cn.vuejs.org/v2/guide/components-props.html https://juejin.im/entry/59e8b8a8518825579d131e51
腾讯云开发者
