阿里云可以做网站,最新国际形势分析,中国十大营销策划公司排名,企业网站硬件设计Vue | 自定义组件双向绑定基础用法 vue 中#xff0c;由于单向数据流#xff0c;常规的父子组件属性更新#xff0c;需要 在父组件绑定相应属性#xff0c;再绑定相应事件#xff0c;事件里去做更新的操作#xff0c;利用语法糖 可以减少绑定事件的操作。 这里就简单的梳…Vue | 自定义组件双向绑定基础用法 vue 中由于单向数据流常规的父子组件属性更新需要 在父组件绑定相应属性再绑定相应事件事件里去做更新的操作利用语法糖 可以减少绑定事件的操作。 这里就简单的梳理一下vue提供的双向更新的语法糖用法水一篇为了节省篇幅只给了关键部分的代码。
vue2
v-model
基础使用
!-- 父组件 --
templatediv classvmodel-testV-model 测试hr /v-model 默认基础类型值 | span{{ val }}/spaninner v-modelval/inner/div
/templateexport default {name: VmodelTest,components: { inner },data() {return {val: 11111,}}
} !-- 子组件 --
templatediv classinnerbutton clickonUPdate更改/button/div
/template
script
export default {name: Inner,props: {value: {type: [String, Number],default: ,},},data() {return {};},methods: {onUPdate() {// 更新this.$emit(input, new Date().toLocaleString());},},
};
/script简单总结就是 对于父组件 v-model 绑定的值子组件 需要 定义一个 value 的props然后更新时使用 input 事件 去更新值适用于基础类型和对象类型⚠️需要注意的是这种更新是全量更新覆盖式。
比如我 v-model 接受的是一个对象我只想更新对象的 a 属性
// 更新
this.$emit(input, {...this.value,a: new Date().toLocaleString(),
});自定义更新事件名 model: 允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。API — Vue.js input 是默认事件可以自定义需要 在子组件 写一个 model(2.2新增) 属性去更改
model: {prop: value, // 指定是更新valueevent: custom-update-value, // 一般以 update:value 命名
},
props: {value: {type: [Array, Object],default: () {},},
},那么 更新时只需要用新的事件名⚠️原来默认input事件已经失效
// 更新
this.$emit(custom-update-value, {...this.value,a: new Date().toLocaleString(),
});sync 修饰符
基础使用 sync 修饰符也双向更新的一个方法更适用于多个属性需要双向更新的场景 首先在父组件中绑定绑定的属性后面跟上sync修饰符
sync 修饰符 | span{{ modelValue3 }}/span
inner3 :model-value.syncmodelValue3/inner3子组件更新时 事件名 update: 拼上 属性名
//...
props: {modelValue: {type: [Array, Object],default: () {},},
},
//...
// 更新
this.$emit(update:modelValue, {...this.value,b: [1, new Date().toLocaleString()],
});也是全量更新 ⚠️注意这种方式不支持 model 方式自定义事件名
一次性绑定多个v-bind.sync)
支持 v-bind 一次性绑定多个值的方式
!-- --
sync 修饰符 对象解构传入vbind | span{{ modelValue4 }}/span
inner4 v-bind.syncmodelValue4/inner4//...(节省篇幅只给出相应的data)
modelValue4: {a: { val: 111 },b: [1, 2]
},/** 子组件 **/
props: {a: {type: [Array, Object],default: () {},},b: {type: [Array, Object],default: () {},},
},
//...
// 更新
this.$emit(update:a, {...this.a,val: new Date().toLocaleString(),
});
this.$emit(update:b, [1, new Date().toLocaleString()]);vue3
v-model
基础使用 父组件传的v-model,子组件用 modelValue 接收 !-- 父组件 --
v-model 默认-对象类型值 | span{{ modelValue1 }}/span
inner1 v-modelmodelValue1/inner1子组件 使用 update:modelValue 更新值
!-- 子组件 --
script setup langts
const props defineProps([modelValue])
const emit defineEmits([update:modelValue])const onUPdate () {// 更新emit(update:modelValue, {...props.modelValue,a: new Date().toLocaleString(),});
}
/script均是全量更新
绑定多个值
!-- 父组件 --
v-model 绑定多个值 | span{{ modelValue2 }} | {{ modelValue21 }}/span
inner2 v-model:modelCusValuemodelValue2 v-model:modelCusValue1modelValue21
/inner2/** 子组件 **/
script setup langtsconst props defineProps([modelCusValue, modelCusValue1])const emit defineEmits([update:modelCusValue, update:modelCusValue1])const onUPdate () {// 更新emit(update:modelCusValue, {...props.modelCusValue,a: new Date().toLocaleString(),});emit(update:modelCusValue1, {...props.modelCusValue1,a: new Date().toLocaleString(),});}
/script也是全量更新
defineModel
基础使用 此宏为 3.4 新增使用起来比前面的方式稍微简洁一些。装个 vue-eslint-parser 且在 vite.config.ts 做如下配置 plugins, 避免编译器报错。 export default defineConfig({plugins: [vue({// 开启 definModelscript: { defineModel: true }}),]//...
})!-- 父组件 --
defineModel() | span{{ modelData }} | {{ modelData1 }} | {{ modelData2 }}/span
inner3v-modelmodelData v-model:modelData1modelData1 v-model:modelData2modelData2
/inner3
//...
const modelData1 ref({a: 1,b: [1, 2],
})
const modelData2 ref({a: 1,b: [1, 2],
})此方法在子组件使用 直接使用 属性 value 赋值就行了
script setup langts
type modelValueType {a: number | string,b: Arraynumber
}
let model defineModelmodelValueType({ required: true })
let model1 defineModelmodelValueType(modelData1, { required: true })
let model2 defineModelmodelValueType(modelData2, { required: true, type: Object,default: { a: 0, b: [2,3] }
})const onUPdate () {// 更新model.value {...model.value,b: [2, 1],a: new Date().toLocaleString()}model1.value.a new Date().toLocaleString();model2.value.a new Date().toLocaleString();// 或者如下方式// Object.assign(model.value, { a: new Date().toLocaleString() });
}
/script这种方式 支持单个属性更新全量更新只需全部赋值比较灵活
最后
若行文有误望评论区交流。
