vue3+Element Plus v-model实现父子组件数据同步

serena_ing

已于 2024-01-10 15:18:49 修改

阅读量808

点赞数 9

文章标签： vue.js javascript typescript

于 2024-01-10 15:16:02 首次发布

本文链接：https://blog.youkuaiyun.com/2401_82544359/article/details/135503986

版权

文章介绍了如何在Vue项目中，利用ElementPlus的dialog组件嵌套子组件，实现数据的双向绑定与操作，同时处理了单向数据流问题，强调了在修改数据时进行深拷贝以保持数据独立性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

展示效果
一、父组件代码
二、子组件
三、data.ts文件
总结

展示效果

在这里插入图片描述

一、父组件代码

<template>
  <div>
    <el-card class="father">
      <el-button type="primary" @click="clickHandler">查看</el-button>
      <el-dialog
        v-model="dialogVisible"
        title="修改数据"
        width="50%"
        align-center
        @close="cancel"
      >
        <Child v-model="data"></Child>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="save"> 确定 </el-button>
          </span>
        </template>
      </el-dialog>
    </el-card>
  </div>