编程知识 cdmana.com

The detailed use of V-model in vue3. X

1、 When used to customize components ,v-model Of prop And default event name changed , And removed model Options

// Parent component <template> <div> <Child v-model="message" /> <div> The value of the binding :{{message}}</div> </div></template>// Child components <template> <div> <input  type="text"  :value="modelValue"  @input="$emit('update:modelValue', $event.target.value)" > </div></template><script>export default { //2.x usage , You can modify prop And the name of the event triggered ,model To abandon  // model: { // prop: 'value', //3.x The default value is changed to modelValue // event: 'input' //3.x The default value is changed to update:modelValue // }, props:['modelValue']}</script>

2.x Removed model To configure ,3.x How to configure the others prop Well ?

// Parent component <template> <div> <Child v-model:text="message" /> <div> The value of the binding :{{message}}</div> </div></template>// Child components <template> <div> <input  type="text"  :value="text"  @input="$emit('update:text', $event.target.value)" > </div></template><script>export default { //3.x  receive v-model Value after colon , The corresponding trigger method is changed to update:text props:['text']}</script>

2、3.x newly added , Multiple can be defined v-model

// Parent component <template> <div> <Child  v-model="message1"  v-model:text="message2"  /> <div> The value of the binding 1:{{message1}}</div> <div> The value of the binding 2:{{message2}}</div> </div></template>// Child components <template> <div> <input  type="text"  :value="modelValue"  @input="$emit('update:modelValue', $event.target.value)" > <input  .........

版权声明
本文为[Irving the procedural ape]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201225150217991G.html

Scroll to Top