vue3+Element Plus v-model实现父子组件数据同步的案例代码
更新时间:2024年01月12日 15:42:00 作者:serena_ing
这篇文章主要介绍了vue3+Element Plus v-model实现父子组件数据同步,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
展示效果
一、父组件代码
<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> </template> <script setup lang="ts"> import { cloneDeep } from "lodash"; import { ref } from "vue"; import Child from "./components/Child"; import type { AnyObject } from "./data.ts"; const dialogVisible = ref(false); const data = ref<AnyObject[]>([ { id: "1001", role: "明兰", video: "知否", score: 10, }, { id: "1002", role: "薛杉杉", video: "杉杉来吃", score: 9, }, ]); const originData = ref<AnyObject[]>([]); const clickHandler = () => { dialogVisible.value = true; originData.value = cloneDeep(data.value); // 需要深拷贝一份,确保数据独立 }; const cancel = () => { dialogVisible.value = false; data.value = originData.value; // 点击取消,使用原数据 }; const save = () => { dialogVisible.value = false; originData.value = data.value; // 点击保存,将最新数据保存一份 }; </script> <style scoped lang="scss"> .father { height: 90vh; } </style>
二、子组件
<template> <div class="son"> <el-table :data="data" :style="{ width: '100%' }" border> <el-table-column prop="role" label="角色" /> <el-table-column prop="video" label="剧名"> <template #default="{ row }"> <el-input v-model="row.video" placeholder="请输入剧名" /> </template> </el-table-column> <el-table-column prop="score" label="评分"> <template #default="{ row }"> <el-input v-model="row.score" placeholder="请输入评分" /> </template> </el-table-column> </el-table> </div> </template> <script setup lang="ts"> import { computed } from "vue"; import type { AnyObject } from "../../data.ts"; const props = defineProps<{ modelValue: AnyObject; }>(); const emits = defineEmits<{ (e: "update:modelValue", data: AnyObject): void; }>(); // 用计算属性的get和set接收,可以避免修改props引起的违反单向数据流警告 const data = computed({ get() { return props.modelValue; }, set(value) { emits("update:modelValue", value); }, }); </script> <style scoped> </style>
三、data.ts文件
export interface AnyObject { id: string; role: string; video: string; score: number; }
总结
- Element Plus dialog对话框中插入子组件,建议把底部按钮写在外面,点击取消或者关闭dialog对话框可以统一用 el-dialog 的 close 事件;
- v-model 可以实现父子组件的数据同步,在子组件修改数据会违反单项数据流,所以需要使用计算属性的 get 和 set 接收一下,避免警告;
- 点击取消的时候需要将数据深拷贝一份,确保数据独立。
到此这篇关于vue3+Element Plus v-model实现父子组件数据同步的文章就介绍到这了,更多相关vue3父子组件数据同步内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
最新评论