Vue中如何封装双向绑定的组件

简单以一个Checkbox为例:

// components/customCheckbox.vue
<template><div class="d-checkbox":class="{'disabled': disabled }"@click="toggle"><i class="icon-e790" v-if="modelValue"></i> <!-- 未选中图标 --><i class="icon-e789 checked" v-else></i> <!-- 选中图标 --><slot></slot></div>
</template><script lang="ts" setup>
// 定义props，接收v-model的值
const props = defineProps({modelValue: {type: Boolean,default: false},disabled: {type: Boolean,default: false}
});// 定义emit事件，用于更新v-model的值
const emit = defineEmits(['update:modelValue']);// 切换选中状态的方法
const toggle = () => {emit('update:modelValue', !props.modelValue);
};
</script><style lang="less">
.d-checkbox {position: relative;display: inline-block;width: 20px;height: 20px;cursor: pointer;> i{color: #dcdfe6;&.checked {color: var(--theme, #409eff);}}// 禁用状态&.disabled {cursor: not-allowed;opacity: 0.5;}// 鼠标悬停效果&:hover:not(.disabled) {.icon-e790 {color: #c0c4cc;}}
}
</style>

核心点为使用modelValue去接参。使用emit去向上级更新。

// 使用
import CustomCheckbox form "@/components/customCheckbox.vue"<CustomCheckbox v-model="params.status">状态</CustomCheckbox>