Vue | 自定义组件双向绑定基础用法

Vue | 自定义组件双向绑定基础用法

vue 中，由于单向数据流，常规的父子组件属性更新，需要 在父组件绑定相应属性，再绑定相应事件，事件里去做更新的操作，利用语法糖 可以减少绑定事件的操作。

这里就简单的梳理一下vue提供的双向更新的语法糖用法（水一篇，为了节省篇幅只给了关键部分的代码）。

vue2

v-model

基础使用

<!-- 父组件 -->
<template><div class="vmodel-test">V-model 测试<hr />v-model 默认基础类型值 | <span>{{ val }}</span><inner v-model="val"></inner></div>
</template>export default {name: "VmodelTest",components: { inner },data() {return {val: 11111,}}
}  

<!-- 子组件 -->
<template><div class="inner"><button @click="onUPdate">更改</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.sync="modelValue3"></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.sync="modelValue4"></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-model="modelValue1"></inner1>

子组件 使用 update:modelValue 更新值

<!-- 子组件 -->
<script setup lang='ts'>
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:modelCusValue="modelValue2" v-model:modelCusValue1="modelValue21"
></inner2>

/** 子组件 **/
<script setup lang='ts'>const 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-model="modelData" v-model:modelData1="modelData1"  v-model:modelData2="modelData2"
></inner3>
//...
const modelData1 = ref({a: 1,b: [1, 2],
})
const modelData2 = ref({a: 1,b: [1, 2],
})

此方法在子组件使用 直接使用 属性 value 赋值就行了

<script setup lang='ts'>
type modelValueType = {a: number | string,b: Array<number>
}
let model = defineModel<modelValueType>({ required: true })
let model1 = defineModel<modelValueType>('modelData1', { required: true })
let model2 = defineModel<modelValueType>('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>

这种方式 支持单个属性更新，全量更新只需全部赋值，比较灵活

最后

若行文有误，望评论区交流。