vue3封装弹窗组件实现父子双向绑定

---

title: vue3封装弹窗组件实现父子双向绑定
date: 2024-06-12 11:27:50
Tags: vue3

简单需求描述

需要封装一个弹窗组件，让其他组件可以调用他并且可以通过其他组件来控制组件的开关。

那么这个时候我们就要使弹窗组件和其他组件实现双向v-model绑定来控制相关数据，让他能够被其他组件打开。

使用的方法

我查看了很多的博客和网页，但是我总觉的他们实现的方法不够优雅，还有直接使用v-if来控制组件开关的，虽然没什么问题完成了需求，但是我不太能够接受这种用法。

官网挂的有两种方法，我相中了defineModel( ),但是需要vue3.4以上的版本，之前的版本还不能使用这个方法。笔者就是使用的是之前的版本，笔者更改成本有点大，怕影响其他程序，所以不得不看向另外一种老版本使用方法，但是我看着这种使用方法很不顺眼，也不想使用这种方法。

最后决定使用计算属性computed来辅助相关的功能的完成。

官网绑定方法

defineModel( )

孩子组件：

<script setup>
const firstName = defineModel('firstName')
const lastName = defineModel('lastName')
</script>

<template>
  <input type="text" v-model="firstName" />
  <input type="text" v-model="lastName" />
</template>

defineEmits()+defineProps()

孩子组件：

<script setup>
defineProps({
  firstName: String,
  lastName: String
})

defineEmits(['update:firstName', 'update:lastName'])
</script>

<template>
  <input
    type="text"
    :value="firstName"
    @input="$emit('update:firstName', $event.target.value)"
  />
  <input
    type="text"
    :value="lastName"
    @input="$emit('update:lastName', $event.target.value)"
  />
</template>

父亲组件：

<UserName
  v-model:first-name="first"
  v-model:last-name="last"
/>

计算属性绑定方法

这个方法的逻辑关系更加清晰，但是这也仅仅是对官方法进行了改写，所以多看官方文档。以下注释应该能看明白代码。

弹窗对话子组件：

<template>
  <el-dialog
    v-model="visible"
    title="儿子标题"
    width="750"
    :close-on-click-modal="false"
    @close="cancel"
    @closed="closed"
    draggable
  >
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="confirm"> 确定 </el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
const visible = computed({
  // 只读，计算相关的属性变化，变化的时候再更新
  get() {
    return props.open;
  },
  // 修改，在变化后还修改传给父亲属性的传值达到双向绑定目的
  set(val) {
    emit("update:open", val);
  },
});

// 传递属性给父组件
const props = defineProps({
  open: Boolean,
});

//传递更新方法给父组件
const emit = defineEmits(["update:open"]);

// 立即关闭弹窗（x）
const cancel = () => {
  visible.value = false;
};

// 关闭弹窗并通知父组件（取消按钮）
const closed = () => {
  emit("update:open", false);
};

// 确认 上传的数据图片内容被选择成功
const confirm = () => {
  emit("update:open", false);
};
</script>

调用：

 <selectPictureDialog v-model:open="pictureDialog" title="父亲标题" />