1. 程式人生 > 其它 >Vue v-model原理與 .sync

Vue v-model原理與 .sync

一句話解釋:
雙向繫結顧名思義, 使用v-bind實現data=>input, 使用@input事件實現input=>data

1 v-model 用在 input 元素上時

使用
<input v-model="sth" />
原理
<input v-model="sth" />
等價於:
<input :value="sth" @input="sth = $event.target.value" />
//input 元素本身有個 oninput 事件,每當輸入框內容發生變化,就會觸發 oninput

2 v-model 用在元件上input時, 父子相互通訊

使用
父: <Son v-model="price" />
子: 
<template>
  <span>
   <input ref="input" :value="value" @input="$emit('input', $event.target.value)" >
  </span>
...
props:['value']
原理 
<Son v-model="price" />
等價於:
<Son :value="price" @input="price = arguments[0]" />

就是個語法糖
類似.sync

使用
父: <Son :money.sync="m" />
子: 
<template>
  <span>
   <p @click="$emit('updata:money', money-100)" >{{money}}</p>
  </span>
...
props:['money']
原理 
<Son:money.sync="m" />
等價於:
<Son :money="m" @updata:money="m = $event" />
//在原生事件中,$event是事件物件, 在自定義事件中,$event是傳遞過來的資料