封装 el-date-picker 不可以使用 :modelValue="modelValue"做双向绑定吗

[tlerbao]

问题，二次封装 el-date-picker ，具体使用和封装代码如下，下面这么写选择数据后不会触发 @change ，是这个组件不能用:modelValue="modelValue"吗？

下面同样的用法二次封装的 el-select\radio\checkbox 都可以

前端菜鸡特来情况。

// 调用
<DataRange v-model="date_range" />

// 二次封装的 DateRange 组件
<template>
  <el-date-picker
    :model-value="modelValue"
    @change="handleChange"
  />
</template>
<script setup lang="ts">
interface Props {
  modelValue?: any;

}

const props = withDefaults(defineProps<Props>(), {
  modelValue: "",
});

const emit = defineEmits<{
  "update:modelValue": [value: any];
}>();

const handleChange = (value: any) => {
  emit("update:modelValue", value);
};
</script>

[zcf0508]

可以看下这两个链接


https://github.com/element-plus/element-plus/issues/10576

https://element-plus.run/#eyJzcmMvQXBwLnZ1ZSI6IjxzY3JpcHQgc2V0dXAgbGFuZz1cInRzXCI+XG5pbXBvcnQgeyByZWYsIHdhdGNoIH0gZnJvbSAndnVlJ1xuaW1wb3J0IERhdGFSYW5nZSBmcm9tICcuL0NvbXAudnVlJ1xuXG5jb25zdCBkYXRlX3JhbmdlID0gcmVmKCcnKVxuXG53YXRjaChkYXRlX3JhbmdlLCAodmFsKSA9PiB7XG4gIGNvbnNvbGUubG9nKHZhbClcbn0pXG5cbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxEYXRhUmFuZ2Ugdi1tb2RlbD1cImRhdGVfcmFuZ2VcIiAvPlxuPC90ZW1wbGF0ZT5cbiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHt9XG59IiwidHNjb25maWcuanNvbiI6IntcbiAgXCJjb21waWxlck9wdGlvbnNcIjoge1xuICAgIFwidGFyZ2V0XCI6IFwiRVNOZXh0XCIsXG4gICAgXCJqc3hcIjogXCJwcmVzZXJ2ZVwiLFxuICAgIFwibW9kdWxlXCI6IFwiRVNOZXh0XCIsXG4gICAgXCJtb2R1bGVSZXNvbHV0aW9uXCI6IFwiQnVuZGxlclwiLFxuICAgIFwidHlwZXNcIjogW1wiZWxlbWVudC1wbHVzL2dsb2JhbC5kLnRzXCJdLFxuICAgIFwiYWxsb3dJbXBvcnRpbmdUc0V4dGVuc2lvbnNcIjogdHJ1ZSxcbiAgICBcImFsbG93SnNcIjogdHJ1ZSxcbiAgICBcImNoZWNrSnNcIjogdHJ1ZVxuICB9LFxuICBcInZ1ZUNvbXBpbGVyT3B0aW9uc1wiOiB7XG4gICAgXCJ0YXJnZXRcIjogMy4zXG4gIH1cbn1cbiIsInNyYy9Db21wLnZ1ZSI6Ijx0ZW1wbGF0ZT5cclxuICA8ZWwtZGF0ZS1waWNrZXJcclxuICAgIHYtbW9kZWw9XCJ2YWx1ZVwiXHJcbiAgICB0eXBlPVwiZGF0ZXRpbWVcIlxyXG4gIC8+XHJcbjwvdGVtcGxhdGU+XHJcblxyXG48c2NyaXB0IHNldHVwIGxhbmc9XCJ0c1wiPlxyXG5pbXBvcnQgeyByZWYsIHdhdGNoIH0gZnJvbSAndnVlJ1xyXG5cclxuaW50ZXJmYWNlIFByb3BzIHtcclxuICBtb2RlbFZhbHVlPzogYW55O1xyXG59XHJcblxyXG5jb25zdCBwcm9wcyA9IHdpdGhEZWZhdWx0cyhkZWZpbmVQcm9wczxQcm9wcz4oKSwge1xyXG4gIG1vZGVsVmFsdWU6IFwiXCIsXHJcbn0pO1xyXG5cclxuY29uc3QgdmFsdWUgPSByZWYocHJvcHMubW9kZWxWYWx1ZSlcclxuXHJcbmNvbnN0IGVtaXQgPSBkZWZpbmVFbWl0czx7XHJcbiAgXCJ1cGRhdGU6bW9kZWxWYWx1ZVwiOiBbdmFsdWU6IGFueV07XHJcbn0+KCk7XHJcblxyXG53YXRjaCh2YWx1ZSwgKHZhbHVlKSA9PiB7XHJcbiAgZW1pdChcInVwZGF0ZTptb2RlbFZhbHVlXCIsIHZhbHVlKTtcclxufSlcclxuXHJcbjwvc2NyaXB0PiIsIl9vIjp7fX0=


如果都写 any 的话建议不要用 ts 。

[jy02534655]

如果二次封装的时候不使用 modelValue ，可以不写，比如我对 el-input 做封装就这样
<template>
<el-input>
<template v-for="(item, i) in useSlotData" :key="i" #[i]>
{{ item }}
</template>
</el-input>
</template>
<script setup>
import { computed } from 'vue';
import { clearObject } from '@/utils';
const props = defineProps({
slotData: {
type: Object,
default: () => {}
}
});
const useSlotData = computed(() => {
return clearObject(props.slotData);
});
</script>
或者用 @vueuse/core 的 useVModel 直接做双向绑定

[Brain777]

// 调用
<DataRange v-model="date_range" />

// 二次封装的 DateRange 组件
<template>
<el-date-picker
v-model="date"/>
</template>
<script setup lang="ts">

interface Props {
modelValue: string | Date;
}

const props = withDefaults(defineProps<Props>(), {
modelValue: "",
});

const emit = defineEmits(["update:modelValue"]);

const date = ref<string | Date>("")

watch(date,(value) => emit("update:modelValue", value))
</script>

可以这样写