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

问题,二次封装 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>
讨论数量: 1

二次封装一般考虑透传,而不是你上述的模式。

<template>
  <div>
    <el-date-picker
      v-bind="$attrs"  <!-- 透传所有的属性-->
      v-on="$listeners"  <!-- 透传所有的事件-->
      :picker-options="pickerOptions"  <!-- 设置自定义的属性-->
    >
      <slot></slot>  <!-- 透传插槽内容-->
    </el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        firstDayOfWeek: 1,  // 设置自定义属性的默认值
        ...this.$attrs.pickerOptions  // 透传 pickerOptions 属性
      }
    };
  }
};
</script>

使用透传,你可以在父组件中像使用原始的el-date-picker组件一样使用你封装的组件,并且可以通过props或者其他方式设置一些自定义的属性。同时,你也能够在父组件中监听原始组件的事件。

4个月前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!