封装 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>

PHPisGod

课程读者 69 声望

暂无个人描述~

0 人点赞

讨论数量: 1

Egoist-Berserker

课程读者 5 声望

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

<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或者其他方式设置一些自定义的属性。同时，你也能够在父组件中监听原始组件的事件。

1年前评论

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

帮助

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

问题，二次封装 `el-date-picker`，具体使用和封装代码如下，下面这么写选择数据后不会触发@change，是这个组件不能用:modelValue=”modelValue”吗？下面同样的用法二次封装的el-select\radio\checkbox都可以

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

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

问题，二次封装 el-date-picker，具体使用和封装代码如下，下面这么写选择数据后不会触发@change，是这个组件不能用:modelValue=”modelValue”吗？ 下面同样的用法二次封装的el-select\radio\checkbox都可以

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录

问题，二次封装 `el-date-picker`，具体使用和封装代码如下，下面这么写选择数据后不会触发@change，是这个组件不能用:modelValue=”modelValue”吗？下面同样的用法二次封装的el-select\radio\checkbox都可以