帶你深入了解vue2中的 v-model，看看如何讓元件支援該語法

這篇文章帶大家了解一下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 元素：

• ##select 下拉方塊：

• #input type='radio' 單選方塊：

• input type='checkbox' 多重選取方塊：

##在程式設計思想上，這種幫助使用者『隱藏細節』的方式叫做

封裝

。 二、v-model 只是語法糖嗎？ (冷知識)

v-model

不只是語法糖，它還有副作用。

副作用如下：

如果

v-model 綁定的是響應式物件上某個不存在的屬性，那麼vue 會悄悄地增加這個屬性，並讓它響應式。 舉個例子，看下面的程式碼：

// template中：
<el-input v-model="user.tel"></el-input>
// script中：
export default {
  data() {
    return {
      user: {
        name: &#39;公众号: 前端要摸鱼&#39;,
      }
    }
  }
}

響應式資料中沒有定義

user.tel

屬性，但template裡卻用v-model 綁定了user.tel，猜一猜當你輸入時會發生什麼事？ 看效果：

揭曉答案：

user

上會新增tel 屬性，並且tel 這個屬性還是響應式的。 這就是『副作用』帶來的效果，你學會了嗎？

三、

v-model

是雙向綁定還是單向資料流？ 2.1

v-model

是雙向綁定嗎？

是，官方說是。

『你可以用v-model 指令在表單

、<textarea></textarea> 和<select></select> 元素上建立雙向資料綁定。 』 —— vue2官方文件2.2 那

v-model

是單向資料流嗎？

是的，它甚至是單向資料流的典型範式。

雖然官方沒有明確表示這一點，但我們可以捋一捋兩者的關係。

什麼是單項資料流？

• 子元件不能改變父元件傳遞給它的

prop

屬性，建議的做法是它拋出事件，通知父元件自行改變綁定的值。

v-model
• 的做法是怎麼樣的？

v-model

做法完全符合單一項目資料流。甚至於，它給出了一種在命名和事件定義上的規範。 <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: &#39;ame&#39;, // 代表 v-model 绑定的prop名
    event: &#39;zard&#39; // 代码 v-model 通知父组件更新属性的事件名
  },
  methods: {
    playDota2(step) {
      const newYear = this.ame + step
      this.$emit(&#39;zard&#39;, newYear)
    }
  }
}
</script>

然后我们在父组件中使用该组件：

// template中
<dota v-model="ti"></dota>
// script中
export default {
  data() {
    return {
      ti: 8
    }
  }
}

看看效果：

让你的组件支持 v-model 就这么容易。

五、demo和源码

获取源码请访问github 

https://github.com/zhangshichun/blog-vue2-demos/tree/master/src/views/about-v-model

更多编程相关知识，请访问：编程视频！！

以上是帶你深入了解vue2中的 v-model，看看如何讓元件支援該語法的詳細內容。更多資訊請關注PHP中文網其他相關文章！