所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外改變父級組件的狀態，從而導致你的應用的數據流向難以理解。
1、v-model 用在 input 元素上
v-model在使用的時候很像雙向綁定的（實際上也是。。。），但是 Vue 是單項數據流，v-model 只是語法糖而已：
<input v-model="something" />
<input v-bind:value="something" v-on:input="something = $event.target.value" />
第一行的代碼其實只是第二行的語法糖。然後第二行代碼還能簡寫成這樣：
<input :value="something" @input="something = $event.target.value" />
要理解這行代碼，首先你要知道 input 元素本身有個 oninput 事件，這是 HTML5 新增加的，類似 onchange ，每當輸入框內容發生變化，就會觸發 oninput ，通過 $event 把最新的 value 傳遞給 something。
我們仔細觀察語法糖和原始語法那兩行代碼，可以得出一個結論：
在給 input 元素添加 v-model 屬性時，默認會把 value 作爲元素的屬性，然後把 'input' 事件作爲實時傳遞 value 的觸發事件
2、v-model 用在組件上
v-model 不僅僅能在 input 上用，在組件上也能使用，拿官網上的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: {
// 不是直接更新值，而是使用此方法來對輸入值進行格式化和位數限制
updateValue: function (value) {
var formattedValue = value
// 刪除兩側的空格符
.trim()
// 保留 2 位小數
.slice(
0,
value.indexOf('.') === -1
? value.length
: value.indexOf('.') + 3
)
// 如果值尚不合規，則手動覆蓋爲合規的值
if (formattedValue !== value) {
this.$refs.input.value = formattedValue
}
// 通過 input 事件帶出數值
// <!--爲什麼這裏把 'input' 作爲觸發事件的事件名？`input` 在哪定義的？-->
this.$emit('input', Number(formattedValue))
}
}
})
如果你知道這兩個問題的答案，那麼恭喜你真正掌握了 v-model，如果你沒明白，那麼可以看下這段代碼：
<currency-input v-model="price"></currency-input>
所以在組件中使用時，它相當於下面的簡寫：
//上行代碼是下行的語法糖
<currency-input :value="price" @input="price = arguments[0]"></currency-input>
所以，給組件添加 v-model 屬性時，默認會把 value 作爲組件的屬性，然後把 'input' 值作爲給組件綁定事件時的事件名。這在寫組件時特別有用。
3、v-model 的缺點和解決辦法
在創建類似複選框或者單選框的常見組件時，v-model就不好用了。
<input type="checkbox" v-model="something" />
v-model 給我們提供好了 value 屬性和 oninput 事件，但是，我們需要的不是 value 屬性，而是 checked 屬性，並且當你點擊這個單選框的時候不會觸發 oninput 事件，它只會觸發 onchange 事件。
因爲 v-model 只是用到了 input 元素上，所以這種情況好解決：
<input type="checkbox" :checked="value" @change="change(value, $event)"
當 v-model 用到組件上時：
<checkbox v-model="value"></checkbox>
Vue.component('checkbox', {
tempalte: '<input type="checkbox" @change="change" :checked="currentValue"/>'
props: ['value'],
data: function () {
return {
//這裏爲什麼要定義一個局部變量，並用 prop 的值初始化它。
currentValue: this.value
};
},
methods: {
change: function ($event) {
this.currentValue = $event.target.checked;
this.$emit('input', this.currentValue);
}
})
在 Vue 2.2 版本，你可以在定義組件時通過 model 選項的方式來定製 prop/event 。
4、vue 組件數據流
從上面 v-model 的分析我們可以這麼理解，雙向數據綁定就是在單向綁定的基礎上給可輸入元素（input、textare等）添加了 change(input) 事件，來動態修改 model 和 view ，即通過觸發（$emit）父組件的事件來修改mv來達到 mvvm 的效果。而 vue 組件間傳遞數據是單向的，即數據總是由父組件傳遞到子組件，子組件在其內部可以有自己維護的數據，但它無權修改父組件傳遞給它的數據，當開發者嘗試這樣做的時候，vue 將會報錯。這樣做是爲了組件間更好的解耦，在開發中可能有多個子組件依賴於父組件的某個數據，假如子組件可以修改父組件數據的話，一個子組件變化會引發所有依賴這個數據的子組件發生變化，所以 vue 不推薦子組件修改父組件的數據，直接修改 props 會拋出警告。流程圖如下：
所以，當你想要在子組件去修改 props 時，把這個子組件當成父組件那樣用，所以就有了
- 1、定義一個局部變量，並用 prop 的值初始化它。
- 2、定義一個計算屬性，處理 prop 的值並返回。
額外的，每次父級組件發生更新時，子組件中所有的 prop 都將會刷新爲最新的值。這意味着你不應該在一個子組件內部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制檯中發出警告。子組件想修改時，只能通過 $emit 派發一個自定義事件，父組件接收到後，由父組件修改。
有兩種常見的試圖改變一個 prop 的情形 :
這個 prop 用來傳遞一個初始值；這個子組件接下來希望將其作爲一個本地的 prop 數據來使用。 在這種情況下，最好定義一個本地的 data 屬性並將這個 prop 用作其初始值：
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
這個 prop 以一種原始的值傳入且需要進行轉換。 在這種情況下，最好使用這個 prop 的值來定義一個計算屬性
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}