Day 29：神奇语法糖－v-model

整个系列都快要完结篇了，怎麽可能独漏 Vue 的神奇语法糖—— v-model 呢？我们已经知道 Vue 基於 MVVM 架构模式，最大的特色就是可以将资料与画面进行双向绑定并同步更新，而 v-model 正是运用在表单元素如 <input>、<textarea>、<select> 的神奇连动语法，使用之前先来了解一下概念与规则：

• 需在元件内的 data 声明初始值：v-model 会忽略表单元素的初始值如 value、checked 等，因此需在 data 声明初始值作为 v-model 的绑定值

  data() {
    return {
      inputText: "",
    };
  },
  

• 一般在元件内的 <input> 使用 v-model

  <pre>@input 即时显示输入内容：{{ inputText }}</pre>
  <label>搜寻：
      <input type="text" v-model="inputText" />
  </label>
  

  相当於 v-model = v-on:input + v-bind:value：监听表单元素的即时变化

  <input type="text" :value="inputText" @input="value = $event.target.value" />
  

  

• 结尾加上修饰符的 v-model.lazy

  <pre>@change 失去聚焦後才确认输入内容：{{ inputText }}</pre>
  <label>搜寻：
      <input type="text" v-model.lazy="inputText" />
  </label>
  

  相当於 v-model = v-on:change + v-bind:value：监听表单元素失去聚焦後的变化

  <input type="text" :value="inputText" @change="value = $event.target.value" />
  

  
  

在元件上使用 v-model

以我们现有在 BookList.vue 中的搜寻栏位为例，原本在 Day 23 中示范将事件从子元件 $emit 抛给父元件处理：

<!-- 子元件 -->
<label>搜寻书本：
	<input
		type="text"
		:value="inputText"
		@input="$emit('searchBook', $event)"
	/>
</label>

<!-- 父元件 -->
<BookList
	navTitle="All"
	:bookList="books"
	:inputText="searchText"
	@searchBook="searchText = $event.target.value"
/>

若改为在父元件使用 v-model，则需将子元件的 $emit 事件名称修改为原始的 input 事件，绑定值也是原始的 value，以供父元件透过 v-model 监听 input 事件，再将监听结果更新到 value，再 prop 给子元素渲染出结果。

<!-- 子元件 -->
<label>搜寻书本：
	<input
		type="text"
		:value="value"
		@input="$emit('input', $event.target.value)"
	/>
</label>

<!-- 父元件 -->
<BookList
	navTitle="All"
	:bookList="books"
	v-model="searchText"
/>

补充：update:myPropName

v-model 使用起来确实很方便，但每个人对於语法的掌握度和使用上的熟练程度不同，都会影响偏好的方式；若是习惯拆分成 v-on 和 v-bind 使用上也相对灵活，方便处理细部的调整，个别对事件和资料进行设定的主控性相对较高。

至於 v-on 和 v-bind 的管理，Vue 也有推荐可以使用 update:myPropName 模式为事件命名，这样便能让事件名称和 prop 相互呼应，在元件中使用也可以一目了然两者之间的关联性。

<!-- 子元件 -->
<label>搜寻书本：
	<input
		type="text"
		:value="keyword"
        @input="$emit('update:keyword', $event)"
	/>
</label>

<!-- 父元件 -->
<BookList
	navTitle="All"
	:bookList="books"
	:keyword="searchText"
    @update:keyword="searchText = $event.target.value"
/>

参考资料

• Vue.js - Form Input Bindings
• Vue.js - API - v-model
• Vue.js - Custom Events - .sync Modifier