vue自定义组件中双向绑定多个参数

2023-09-09 15:30| 来源: 网络整理| 查看: 265

vue自定义组件中双向绑定多个参数前言vue2中实现多个参数的双向绑定v-bind实现双向绑定.sync实现双向绑定 vue3中使用多个v-model

前言

在vue2中一个标签有且只有一个v-model，因此只能实现一个数据的双向绑定，而vue2.3+中新增了一个修饰符.sync，可以让我们在自定义组件中对多个参数进行双向绑定。

vue2中实现多个参数的双向绑定

让我们回忆一下使用v-bind模拟v-model实现双向绑定，vue2自定义组件中使用v-model,其实v-model是v-bind&v-on的语法糖，那同理.sync也是v-bind&v-on的语法糖。

v-bind实现双向绑定 //child node Vue.component('custom-input', { props: { value: String }, template: ` ` }) //parent node export default { data() { inputValue: "hello" }, methods:{ handleChangeValue(e){ this.inputValue=e; } } } .sync实现双向绑定 //child node Vue.component('custom-input', { props: { value: String }, template: ` ` }) //parent node export default { data() { inputValue: "hello" }, methods:{ handleChangeValue(e){ this.inputValue=e; } } }

因此这里可以把.sync装饰词(:value.async="inputValue")看作是v-bind&v-on的语法糖(:value="inputValue" @update:value="handleChangeValue")。

一个标签中可包含多个.sync，使用$emit(‘update:xxx’, $event.target.value)更新props。

官网也更推荐使用.sync来代替v-model进行参数的双向绑定，在子组件中存在变更来源，便于维护

vue3中使用多个v-model //子组件 export default { props:['username','userpass'], } //父组件 ... ...

vue3中的v-model像是提取vue2中的.sync和v-model的优势结合，使用起来更加便捷。

vue官网 .sync 修饰符

【本文地址】

公司简介

联系我们