当前位置：首页 > news >正文

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

news 来源：原创 2025/4/21 8:16:51

父传子模式

父组件 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-viewoperateCommandType: "info-add" | "info-modify" | "info-view";// 滚动到离顶部表头的距离scrollTop?: number;}>(),{applySampleList: () => [],acceptType: "",operateCommandType: "info-add",scrollTop: 0}
);
</script><template><!-- 受理样品表格，水质类 --><ApplySampleSZTablev-if="props.acceptType.includes(`GD`)":applySampleData="props.applySampleList":applySampleTableScrollTop="props.scrollTop":operate-command-type="props.operateCommandType" /><!-- 受理样品表格，其他 --><ApplySampleOtherTablev-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><!-- 受理样品表格，水质类 --><ApplySampleSZTablev-if="acceptType.includes(`GD`)":applySampleData="applySampleList":applySampleTableScrollTop="scrollTop":operate-command-type="operateCommandType" /><!-- 受理样品表格，其他 --><ApplySampleOtherTablev-else:applySampleData="applySampleList":applySampleTableScrollTop="scrollTop":operate-command-type="operateCommandType" />
</template><style scoped lang="scss"></style>