這篇文章帶大家了解一下vue2中的 v-model，看看v-model 是雙向綁定還是單向資料流，如何讓你開發的元件支援 v-model，希望對大家有所幫助。
你將:
v-model 是什麼的文法糖？ vue2 對原生元件究竟做了什麼特殊處理？ v-model 到底是單向資料流還是資料雙向綁定？ v-model 在語法糖之外的『副作用』？ v-model 語法。 v-model 的本質是語法糖。 『
v-model本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理。 ’ -- 官方文件。 【相關推薦：vue.js教學】
什麼是語法糖？
語法糖，簡單來說就是『便捷寫法』。
在大部分情況下， v-model="foo" 等價於:value="foo" 加上 @input ="foo = $event";
<!-- 在大部分情况下，以下两种写法是等价的 --> <el-input v-model="foo" /> <el-input :value="foo" @input="foo = $event" />
沒錯，在大部分情況下如此。
但也有例外：
vue2 為元件提供了model 屬性，可以讓使用者自訂傳值的prop名稱和更新值的事件名稱。這個暫且略過，第四節會細說。
對於原生html 原生元素，vue 幹了大量『髒活兒』，目的是為了能讓我們忽略 html 在api上的差異性。下列元素的左右兩種寫法是等價的：
textarea 元素：
下拉方塊：
單選方塊：
多重選取方塊：
。 二、v-model 只是語法糖嗎？ (冷知識)
v-model如果不只是語法糖，它還有副作用。
副作用如下：
v-model 綁定的是響應式物件上某個不存在的屬性，那麼vue 會悄悄地增加這個屬性，並讓它響應式。 舉個例子，看下面的程式碼：
// template中：
<el-input v-model="user.tel"></el-input>
// script中：
export default {
data() {
return {
user: {
name: '公众号: 前端要摸鱼',
}
}
}
}響應式資料中沒有定義
user.tel 屬性，但template裡卻用v-model 綁定了user.tel，猜一猜當你輸入時會發生什麼事？ 看效果：
揭曉答案：
上會新增tel 屬性，並且tel 這個屬性還是響應式的。 這就是『副作用』帶來的效果，你學會了嗎？
三、
v-model『你可以用v-model 指令在表單
、<textarea> 和<select> 元素上建立雙向資料綁定。 』 —— vue2官方文件2.2 那
雖然官方沒有明確表示這一點，但我們可以捋一捋兩者的關係。什麼是單項資料流？
屬性，建議的做法是它拋出事件，通知父元件自行改變綁定的值。
做法完全符合單一項目資料流。甚至於，它給出了一種在命名和事件定義上的規範。 <p>众所周知 <code>.sync 修饰符是单向数据流的另一个典型范式。
『单向数据流』总结起来其实也就8个字：『数据向下，事件向上』。
v-model虽然不想说，但这确实是高频面试题。
在定义 vue 组件时，你可以提供一个 model 属性，用来定义该组件以何种方式支持 v-model。
model 属性本身是有默认值的，如下：
// 默认的 model 属性
export default {
model: {
prop: 'value',
event: 'input'
}
}也就是说，如果你不定义 model 属性，或者你按照当面方法定义属性，当其他人使用你的自定义组件时，v-model="foo" 就完全等价于 :value="foo" 加上 @input="foo = $event"。
如果把 model 属性进行一些改装，如下：
// 默认的 model 属性
export default {
model: {
prop: 'ame',
event: 'zard'
}
}那么，v-model="foo" 就等价于 :ame="foo" 加上 @zard="foo = $event"。
没错，就是这么容易，让我们看个例子。
先定义一个自定义组件：
<template>
<div>
我们是TI{{ ame }}冠军
<el-button @click="playDota2(1)">加</el-button>
<el-button @click="playDota2(-1)">减</el-button>
</div>
</template>
<script>
export default {
props: {
ame: {
type: Number,
default: 8
}
},
model: { // 自定义v-model的格式
prop: 'ame', // 代表 v-model 绑定的prop名
event: 'zard' // 代码 v-model 通知父组件更新属性的事件名
},
methods: {
playDota2(step) {
const newYear = this.ame + step
this.$emit('zard', newYear)
}
}
}
</script>然后我们在父组件中使用该组件：
// template中
<dota v-model="ti"></dota>
// script中
export default {
data() {
return {
ti: 8
}
}
}看看效果：
让你的组件支持 v-model 就这么容易。
获取源码请访问github
https://github.com/zhangshichun/blog-vue2-demos/tree/master/src/views/about-v-model
更多编程相关知识，请访问：编程视频！！
以上是帶你深入了解vue2中的 v-model，看看如何讓元件支援該語法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
