编程知识 cdmana.com

vue3.x初探之v-model的详细使用

1、用于自定义组件时,v-model的prop和默认事件名更改了,并且移除了model选项

//父组件<template> <div> <Child v-model="message" /> <div>绑定的值:{{message}}</div> </div></template>//子组件<template> <div> <input  type="text"  :value="modelValue"  @input="$emit('update:modelValue', $event.target.value)" > </div></template><script>export default { //2.x用法,可以修改prop和触发的事件名称,model以废弃 // model: { // prop: 'value', //3.x默认值改为了modelValue // event: 'input' //3.x默认值改为了update:modelValue // }, props:['modelValue']}</script>

2.x移除了model配置,3.x那又该怎么配置其他prop呢?

//父组件<template> <div> <Child v-model:text="message" /> <div>绑定的值:{{message}}</div> </div></template>//子组件<template> <div> <input  type="text"  :value="text"  @input="$emit('update:text', $event.target.value)" > </div></template><script>export default { //3.x 接收v-model冒号后面的值,相应的触发的方法改为update:text props:['text']}</script>

2、3.x新增,可以定义多个v-model

//父组件<template> <div> <Child  v-model="message1"  v-model:text="message2"  /> <div>绑定的值1:{{message1}}</div> <div>绑定的值2:{{message2}}</div> </div></template>//子组件<template> <div> <input  type="text"  :value="modelValue"  @input="$emit('update:modelValue', $event.target.value)" > <input  .........

版权声明
本文为[程序猿欧文]所创,转载请带上原文链接,感谢
https://my.oschina.net/mikeowen/blog/4840704

Scroll to Top