Vue：带有 v-model 的代理框架组件

Question

我想代理

<vue-date-picker/>

，它以可以与 Dayjs（我们在整个应用程序中使用）一起使用的方式公开基于日期的 v 模型。我怎样才能实现这个目标？我使用的是带有组合 API 的最新 Vue。

我知道我需要使用 @update:model-value 和 :model-value 将 2 路数据绑定拆分为 2x1 路并在两者之间进行转换，但我不知道如何传递 v-model value 到 ref() 中，同时发出可以在父组件中作为 v-model 使用的事件。我尝试了很多变体，我当前的代码如下所示：

const convertedValue = ref(dayjs(props.value).toDate());
watchEffect(() => {
  convertedValue.value = dayjs(props.value).toDate();
});
watchEffect(() => {
  emit('update:value', dayjs(convertedValue.value));
});
...
<vue-date-picker :model-value="convertedValue" />

但它就是行不通。这应该是一个非常常见的用例，不是吗？我能做什么？

---

编辑：感谢亚历山大和我的一位同事的回答，我设法让它像这样工作：

const value = computed(() => convertToDatePicker(props.modelValue));
const emit = defineEmits<{
  'update:model-value': [date: dayjs.Dayjs | null];
}>();
function handleEmit(event: ModelValue) {
  emit('update:model-value', convertToDayjs(event));
}
...
:model-value="value"
@update:model-value="handleEmit"

Answer 1

有标准的使用方法

computed()

：

// use it as v-model for the input in the template
const value = computed({
  get(){
    return dayjs(props.value).toDate();
  },
  set(val){
    emit('update:value', dayjs(val));
  }
  
});

我还建议使用

modelValue

而不是

value

作为 prop，这样您也可以使用 clean

v-model

绑定代理组件。

在 Vue 3.3 中，有一个宏

defineModel()

可用，它接受与第二个参数相同的 get/set。 它被标记为实验性的，在 3.4 中稳定