快捷導(dǎo)航

vue3+Element?Plus?v-model實現(xiàn)父子組件數(shù)據(jù)同步的案例代碼

更新時間：2024年01月12日 15:42:00 作者：serena_ing

這篇文章主要介紹了vue3+Element?Plus?v-model實現(xiàn)父子組件數(shù)據(jù)同步,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

展示效果

一、父組件代碼

<template>
  <div>
    <el-card class="father">
      <el-button type="primary" @click="clickHandler">查看</el-button>
      <el-dialog
        v-model="dialogVisible"
        title="修改數(shù)據(jù)"
        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); // 需要深拷貝一份，確保數(shù)據(jù)獨立
};
const cancel = () => {
  dialogVisible.value = false;
  data.value = originData.value; // 點擊取消，使用原數(shù)據(jù)
};
const save = () => {
  dialogVisible.value = false;
  originData.value = data.value; // 點擊保存，將最新數(shù)據(jù)保存一份
};
</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引起的違反單向數(shù)據(jù)流警告
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;
}

總結(jié)

Element Plus dialog對話框中插入子組件，建議把底部按鈕寫在外面，點擊取消或者關(guān)閉dialog對話框可以統(tǒng)一用 el-dialog 的 close 事件；
v-model 可以實現(xiàn)父子組件的數(shù)據(jù)同步，在子組件修改數(shù)據(jù)會違反單項數(shù)據(jù)流，所以需要使用計算屬性的 get 和 set 接收一下，避免警告；
點擊取消的時候需要將數(shù)據(jù)深拷貝一份，確保數(shù)據(jù)獨立。

到此這篇關(guān)于vue3+Element Plus v-model實現(xiàn)父子組件數(shù)據(jù)同步的文章就介紹到這了,更多相關(guān)vue3父子組件數(shù)據(jù)同步內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: