Vue v-model原理與 .sync
阿新 • • 發佈:2022-02-23
一句話解釋:
雙向繫結顧名思義, 使用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是傳遞過來的資料