vue3 composition api使用v-model封装el-dialog

最新推荐文章于 2025-02-08 16:26:59 发布

原创最新推荐文章于 2025-02-08 16:26:59 发布 · 866 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

文章讲述了在Vue中，为了遵循新版本的规范，避免直接修改props，子组件应使用computed来处理v-model绑定的modelValue。定义emit事件`update:modelValue`以更新父组件状态。

只贴上精简代码

父组件

父组件使用v-model绑定子组件，会默认传递一个modelValue变量和update:modelValue方法到子组件

<customDialog
   v-model="customDialogVisible "
></customDialog>

子组件

 <el-dialog
      v-model="dialogVisible "
      ...
    >
    ...

在defineEmits和defineEmits定义modelValue变量和update:modelValue方法
vue语法中不应直接修改props(一些旧版本中直接修改是可以正常运行的，但新版本严格限制，直接报错)，所以子组件中v-model不应绑定modelValue，所以用computed生成一个变量用于v-model绑定

<script lang="ts" setup>
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";

const props = defineEmits<{
  modelValue: boolean;
}>();

const emits = defineEmits<{
  (e: "update:modelValue", t: boolean): void;
}>();

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (newValue) => {
    emits("update:modelValue", newValue);
  },
});
...