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

父传子模式

父组件 SampleInput.vue

javascript 复制代码
<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

javascript 复制代码
<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

javascript 复制代码
<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

javascript 复制代码
<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>
相关推荐
伍哥的传说44 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi9878381 小时前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊1 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听12 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿2 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课2 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee1232 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为