Vue2的.sync修饰符转Vue3中v-model - TOMMYHU - 专注互联网开发及运营技术,提供相关资料及软件下载,奇趣网络时事评论!
Dec 13

Vue2的.sync修饰符转Vue3中v-model 不指定

tommyhu , 09:11 , 大前端 » vue.js , 评论(0) , 引用(0) , 阅读(850) , Via 本站原创 | |

 Vue2中的语法糖.sync:

在父组件中的
<div :title.sync="visible" ></div>
等同于: / .sync将针对于title的监听事件缩写 /
<div :title="visible" @update:title="visible = $event" ></div>
在子组件的methods中使用如下将新的value传给父级:

` handleClose() {        this.$emit('update:title', newValue)    }`

Vue3中用v-model替代了.sync修饰符和组件的model选项 / 不兼容 /:

针对于有参数的:<div v-model:title="visible" ></div>
等同于:<div :title="visible" @update:title="visible = $event" ></div>

Vue3中还针对于没有参数的v-model:

<div v-model="visible" ></div>
没有参数但却实际上在父组件内传入modelValue,类似于:
v-model:modelValue="visible" @updata:modelValue="visible =$event"
在父组件里是运用visible,在子组件里传入的props里的是modelValue.
更改参数,传入父级也是用modelValue
this.$emit('update:modelValue', newValue)

详情可以看Vue3的官方

.sync在Vue3的转变

  • 中查看更多“Vue2的.sync修饰符转Vue3中v-model”相关内容
  • 中查看更多“Vue2的.sync修饰符转Vue3中v-model”相关内容
  • 中查看更多“Vue2的.sync修饰符转Vue3中v-model”相关内容
  • 中查看更多“Vue2的.sync修饰符转Vue3中v-model”相关内容
  • 在此发表你对本文的看法:

    您的称呼(例如:乔布斯、tommyhu 等)

    emotemotemotemotemotemotemotemotemotemotemotemotemotemotemotemot