Vue3 + TypeScript，使用祖先传后代模式重构父传子模式

BillKu

已于 2025-04-20 15:08:50 修改

阅读量313

点赞数 3

文章标签：重构 javascript 前端

于 2025-04-20 15:06:42 首次发布

本文链接：https://blog.csdn.net/BillKu/article/details/147365645

版权

父传子模式

父组件 SampleInput.vue

<script setup lang="ts" name="SampleInput">
import { ref } from "vue";
import type { ApplyBasicInfo, Apply, ApplySample } from "@/interface";
import CommonApplySampleTable from "@/components/common/CommonApplySampleTable.vue";

// 定义数据
// 受理基础信息
const applyBasicInfo = ref<ApplyBasicInfo | null>(null)
// 受理样品表格数据
const applySampleTableData = ref<ApplySample[]>([]);
// 滚动到离顶部表头的距离
const applySampleTableScrollTop = ref(0);

......

</script>

<template>
  <!-- 提供数据给子类 -->
  <CommonApplySampleTable
    :apply-sample-list="applySampleTableData"
    :accept-type="applyBasicInfo.acceptType"
    :scroll-top="applySampleTableScrollTop"
    operate-command-type="info-add" />
</template>

子组件 CommonApplySampleTable.vue

<script setup lang="ts" name="CommonApplySampleTable">
import type { ApplySample } from "@/interface";
import ApplySampleSZTable from "@/components/ApplySampleSZTable.vue";
import ApplySampleOtherTable from "@/components/ApplySampleOtherTable.vue";

// 接收父类提供的数据
const props = withDefaults(
  defineProps<{
    // 受理样品列表
    applySampleList: ApplySample[];
    // 受理类别
    acceptType: string;
    // 操作指令类型：新增删除：info-add；修改：info-modify；查看：info-view
    operateCommandType: "info-add" | "info-modify" | "info-view";
    // 滚动到离顶部表头的距离
    scrollTop?: number;
  }>(),
  {
    applySampleList: () => [],
    acceptType: "",
    operateCommandType: "info-add",
    scrollTop: 0
  }
);
</script>

<template>
  <!-- 受理样品表格，水质类 -->
  <ApplySampleSZTable
    v-if="props.acceptType.includes(`GD`)"
    :applySampleData="props.applySampleList"
    :applySampleTableScrollTop="props.scrollTop"
    :operate-command-type="props.operateCommandType" />
  <!-- 受理样品表格，其他 -->
  <ApplySampleOtherTable
    v-else
    :applySampleData="props.applySampleList"
    :applySampleTableScrollTop="props.scrollTop"
    :operate-command-type="props.operateCommandType" />
</template>

<style scoped lang="scss"></style>

祖先传后代模式

父组件 SampleInput.vue

<script setup lang="ts" name="SampleInput">
import { ref, provide, computed } from "vue";
import type { ApplyBasicInfo, Apply, ApplySample } from "@/interface";
import CommonApplySampleTable from "@/components/common/CommonApplySampleTable.vue";

// 定义数据
// 受理基础信息
const applyBasicInfo = ref<ApplyBasicInfo | null>(null)
// 受理样品表格数据
const applySampleTableData = ref<ApplySample[]>([]);
// 滚动到离顶部表头的距离
const applySampleTableScrollTop = ref(0);

......

// 提供数据给后代
// 受理样品列表
provide("applySampleList", applySampleTableData); // applySampleTableData是个Ref对象，不需要.value，传递ref对象本身（响应式数据）
// 受理类别
provide(
  "acceptType",
  computed(() => applyBasicInfo.value.acceptType) // applyBasicInfo.value.acceptType 是派生数据（属性数据），通过computed提供响应式数据
);
// 操作指令类型：新增删除：info-add；修改：info-modify；查看：info-view
provide("operateCommandType", ref("info-add"));
// 滚动到离顶部表头的距离
provide("scrollTop", applySampleTableScrollTop); // applySampleTableScrollTop是个Ref对象，不需要.value，传递ref对象本身（响应式数据）
</script>

<template>
  <CommonApplySampleTable />
</template>

子组件 CommonApplySampleTable.vue

<script setup lang="ts" name="CommonApplySampleTable">
import type { ApplySample } from "@/interface";
import ApplySampleSZTable from "@/components/ApplySampleSZTable.vue";
import ApplySampleOtherTable from "@/components/ApplySampleOtherTable.vue";
import { inject, type Ref, ref } from "vue";

// 接收祖先提供的数据
// 受理样品列表
const applySampleList = inject<Ref<ApplySample[]>>("applySampleList", ref([]));
// 受理类别
const acceptType = inject<Ref<string>>("acceptType", ref(""));
// 操作指令类型：新增删除：info-add；修改：info-modify；查看：info-view
const operateCommandType = inject<Ref<"info-add" | "info-modify" | "info-view">>("operateCommandType", ref("info-add"));
// 滚动到离顶部表头的距离
const scrollTop = inject<Ref<number>>("scrollTop", ref(0));
</script>

<template>
  <!-- 受理样品表格，水质类 -->
  <ApplySampleSZTable
    v-if="acceptType.includes(`GD`)"
    :applySampleData="applySampleList"
    :applySampleTableScrollTop="scrollTop"
    :operate-command-type="operateCommandType" />
  <!-- 受理样品表格，其他 -->
  <ApplySampleOtherTable
    v-else
    :applySampleData="applySampleList"
    :applySampleTableScrollTop="scrollTop"
    :operate-command-type="operateCommandType" />
</template>

<style scoped lang="scss"></style>