是單向的。雖然vue有雙向綁定“v-model”，但是vue父子組件之間數(shù)據(jù)傳遞，仍然還是遵循單向數(shù)據(jù)流的，父組件可以向子組件傳遞props，但是子組件不能修改父組件傳遞來(lái)的props，子組件只能通過(guò)事件通知父組件進(jìn)行數(shù)據(jù)更改。

本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。

vue是單向數(shù)據(jù)流，數(shù)據(jù)流向是從上到下，從父組件傳遞到子組件的。

不要和vue的雙向數(shù)據(jù)綁定搞混了；雙向數(shù)據(jù)綁定說(shuō)的是視圖和模板之間的渲染關(guān)系，并不是數(shù)據(jù)的流向關(guān)系!

vue父子組件之間數(shù)據(jù)傳遞是遵循單向數(shù)據(jù)流的，父組件可以向子組件傳遞props，但是子組件不能修改父組件傳遞來(lái)的props，子組件只能通過(guò)事件通知父組件進(jìn)行數(shù)據(jù)更改。

1，單向數(shù)據(jù)流：

所有的 prop 都使得其父子 prop 之間形成了一個(gè)單向下行綁定：父級(jí) prop 的更新會(huì)向下流動(dòng)到子組件中，但是反過(guò)來(lái)則不行。這樣會(huì)防止從子組件意外變更父級(jí)組件的狀態(tài)，從而導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解。

額外的，每次父級(jí)組件發(fā)生變更時(shí)，子組件中所有的 prop 都將會(huì)刷新為最新的值。這意味著你不應(yīng)該在一個(gè)子組件內(nèi)部改變 prop。如果你這樣做了，也將會(huì)改變父組件的狀態(tài)。

2，Prop是通過(guò)引用傳入的：

注意在 JavaScript 中對(duì)象和數(shù)組是通過(guò)引用傳入的，所以對(duì)于一個(gè)數(shù)組或?qū)ο箢愋偷?prop 來(lái)說(shuō)，在子組件中改變變更這個(gè)對(duì)象或數(shù)組本身將會(huì)影響到父組件的狀態(tài)。

深入理解 Vue 單向數(shù)據(jù)流

1、v-model 用在 input 元素上

v-model在使用的時(shí)候很像雙向綁定的（實(shí)際上也是。。。），但是 Vue 是單項(xiàng)數(shù)據(jù)流，v-model 只是語(yǔ)法糖而已：

<input v-model="something" /> <input v-bind:value="something" v-on:input="something = $event.target.value" />

第一行的代碼其實(shí)只是第二行的語(yǔ)法糖。然后第二行代碼還能簡(jiǎn)寫成這樣：

<input :value="something" @input="something = $event.target.value" />

要理解這行代碼，首先你要知道 input 元素本身有個(gè) oninput 事件，這是 HTML5 新增加的，類似 onchange ，每當(dāng)輸入框內(nèi)容發(fā)生變化，就會(huì)觸發(fā) oninput ，通過(guò) $event 把最新的 value 傳遞給 something。

我們仔細(xì)觀察語(yǔ)法糖和原始語(yǔ)法那兩行代碼，可以得出一個(gè)結(jié)論： 在給 input 元素添加 v-model 屬性時(shí)，默認(rèn)會(huì)把 value 作為元素的屬性，然后把 'input' 事件作為實(shí)時(shí)傳遞 value 的觸發(fā)事件

2、v-model 用在組件上

v-model 不僅僅能在 input 上用，在組件上也能使用，拿官網(wǎng)上的demo看。

<currency-input v-model="price"></currency-input> Vue.component('currency-input', {   template: '     <span>       $       <input         ref="input"         v-bind:value="value"         v-on:input="updateValue($event.target.value)"       >     </span>   ',   props: ['value'], // 為什么這里要用 value 屬性，value在哪里定義的？   methods: {     // 不是直接更新值，而是使用此方法來(lái)對(duì)輸入值進(jìn)行格式化和位數(shù)限制     updateValue: function (value) {       var formattedValue = value         // 刪除兩側(cè)的空格符         .trim()         // 保留 2 位小數(shù)         .slice(           0,           value.indexOf('.') === -1             ? value.length             : value.indexOf('.') + 3         )       // 如果值尚不合規(guī)，則手動(dòng)覆蓋為合規(guī)的值       if (formattedValue !== value) {         this.$refs.input.value = formattedValue       }       // 通過(guò) input 事件帶出數(shù)值       // <!--為什么這里把 'input' 作為觸發(fā)事件的事件名？`input` 在哪定義的？-->       this.$emit('input', Number(formattedValue))     }   } })

如果你知道這兩個(gè)問(wèn)題的答案，那么恭喜你真正掌握了 v-model，如果你沒(méi)明白，那么可以看下這段代碼：

<currency-input v-model="price"></currency-input> 所以在組件中使用時(shí)，它相當(dāng)于下面的簡(jiǎn)寫： //上行代碼是下行的語(yǔ)法糖 <currency-input :value="price" @input="price = arguments[0]"></currency-input>

所以，給組件添加 v-model 屬性時(shí)，默認(rèn)會(huì)把 value 作為組件的屬性，然后把 'input' 值作為給組件綁定事件時(shí)的事件名。這在寫組件時(shí)特別有用。

3、v-model 的缺點(diǎn)和解決辦法

在創(chuàng)建類似復(fù)選框或者單選框的常見組件時(shí)，v-model就不好用了。

<input type="checkbox" v-model="something" />

v-model 給我們提供好了 value 屬性和 oninput 事件，但是，我們需要的不是 value 屬性，而是 checked 屬性，并且當(dāng)你點(diǎn)擊這個(gè)單選框的時(shí)候不會(huì)觸發(fā) oninput 事件，它只會(huì)觸發(fā) onchange 事件。

因?yàn)?v-model 只是用到了 input 元素上，所以這種情況好解決：

<input type="checkbox" :checked="value" @change="change(value, $event)"

當(dāng) v-model 用到組件上時(shí)：

<checkbox v-model="value"></checkbox>  Vue.component('checkbox', {   tempalte: '<input type="checkbox" @change="change" :checked="currentValue"/>'   props: ['value'],   data: function () {         return {             //這里為什么要定義一個(gè)局部變量，并用 prop 的值初始化它。             currentValue: this.value         };     },   methods: {     change: function ($event) {       this.currentValue = $event.target.checked;       this.$emit('input', this.currentValue);       } })

在 Vue 2.2 版本，你可以在定義組件時(shí)通過(guò) model 選項(xiàng)的方式來(lái)定制 prop/event 。

4、vue 組件數(shù)據(jù)流

從上面 v-model 的分析我們可以這么理解，雙向數(shù)據(jù)綁定就是在單向綁定的基礎(chǔ)上給可輸入元素（input、textare等）添加了 change(input) 事件，來(lái)動(dòng)態(tài)修改 model 和 view ，即通過(guò)觸發(fā)（$emit）父組件的事件來(lái)修改mv來(lái)達(dá)到 mvvm 的效果。而 vue 組件間傳遞數(shù)據(jù)是單向的，即數(shù)據(jù)總是由父組件傳遞到子組件，子組件在其內(nèi)部可以有自己維護(hù)的數(shù)據(jù)，但它無(wú)權(quán)修改父組件傳遞給它的數(shù)據(jù)，當(dāng)開發(fā)者嘗試這樣做的時(shí)候，vue 將會(huì)報(bào)錯(cuò)。這樣做是為了組件間更好的解耦，在開發(fā)中可能有多個(gè)子組件依賴于父組件的某個(gè)數(shù)據(jù)，假如子組件可以修改父組件數(shù)據(jù)的話，一個(gè)子組件變化會(huì)引發(fā)所有依賴這個(gè)數(shù)據(jù)的子組件發(fā)生變化，所以 vue 不推薦子組件修改父組件的數(shù)據(jù)，直接修改 props 會(huì)拋出警告。流程圖如下：

所以，當(dāng)你想要在子組件去修改 props 時(shí)，把這個(gè)子組件當(dāng)成父組件那樣用，所以就有了

• 1、定義一個(gè)局部變量，并用 prop 的值初始化它。
• 2、定義一個(gè)計(jì)算屬性，處理 prop 的值并返回。

【