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

2023-12-20 08:07:24

只贴上精简代码

父组件

父组件使用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);
  },
});
...

文章来源:https://blog.csdn.net/qq_42611074/article/details/135080689
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。