.Sync and the difference between the v-model

v-model binding bidirectional one-way data flow - when "parent component to pass values ​​to the subassembly, the subassembly modified value, the current value is passed to the parent e.target.value components, the parent transfers the value to the subassembly , the value of the modified subassembly

Subassemblies kInput.vue

<input :value="value" @input="onInput" v-bind="$attrs">

Parent component parent.vue

<-! V-model represents the value has been transferred in the past sub-assembly -> 
<KInput = V-Model "model.username"> </ KInput>

<-! And effect as above, but the above wording a syntactic sugar ->
<- <KInput:! = value "model.username" @ the INPUT = "getData"> </ KInput> ->
<Model-KInput v = "model.password" of the type = "password" > </ KInput>
V-Model is equivalent to: value + @ input binding event

sync modifier added to v2.4, similar to the v-model, he can be used to modify the property passed to the sub-assembly
<Input: value.sync = "username"> equivalent to
<The Input: value = "username" @updata: value = "= $ usernaem Event" > 
attribute name here is bound to change, will change the name of the corresponding property
<The Input : foo = "username" @updata : foo = "Event usernaem = $"> 
for Scene: attribute subassembly want to modify the parent component transfer
control sync modifier in the parent, but also relatively fixed update event name : xx

 


Guess you like

Origin www.cnblogs.com/cazj/p/12522157.html