0

想象一下，我有一个应用程序，它有 10 个在某些方面相似但包含不同内容和一些功能差异的组件。但是它们都接收相同的 3 个道具作为基础（换句话说，它们可能定义更多但都定义了至少三个特定道具）它们也都有 1 个共同发射。它们还调用const store = useStore()并具有从 vuex 存储中提取值的相同计算属性。

有没有办法我可以创建一个可组合或其他策略来让这些组件组合或继承这些当前在 src 中重复的常见代码行。

例子：

//component 1
<script lang="ts" setup>

import { useStore } from 'vuex';

const store = useStore();

const props = defineProps<{
  a: number;
  b: string;
  c: boolean;
  uniqueToComp1: string;
}>();

const foo = computed(() => store.state.bar[props.a]);
const uniqueConstForComp1 = computed(() => props.a + Math.random());

const emit = defineEmits<{
  (e: 'exit'): void;
}>();

</script>

另一个例子：

//component 2
<script lang="ts" setup>

import { useStore } from 'vuex';

const store = useStore();

const props = defineProps<{
  a: number;
  b: string;
  c: boolean;
  uniqueToComp2: Function;
}>();

const foo = computed(() => store.state.bar[props.a]);
const uniqueConstForComp2 = computed(() => props.a - 8);

const emit = defineEmits<{
  (e: 'exit'): void;
}>();

</script>

注意这两者之间有很多重复，但也有关键的区别。

4

0 回答 0