当组件具有相同的 props 和逻辑，但模板中的 HTML 非常不同时，这是 Vue 3 中重用的最佳模式

Question

我偶尔会遇到这样的情况：多个组件具有相同或几乎相同的 props 和脚本逻辑，但它们的显示差异很大，以至于在

template

中使用条件逻辑并没有真正意义。

例如，现在我有一个情况，我在应用程序的不同部分以不同的视觉外观渲染指标，但每个组件中的处理逻辑几乎相同。

这里代码重用的最佳模式是什么？

• 将逻辑推入可组合项？
• 某种动态模板选择系统？
• 还有什么我没想到的吗？

Answer 1

我发现我们可以仅使用模板来使用 SFC，而无需使用 props。然后我们使用它的渲染函数而不进行 prop 类型验证，验证是在公共组件中完成的，我们将公共组件的 props 传递给渲染函数。至少第一眼看起来很酷：

参见 Vue SFC Playground

仅模板 SFC：Comp.vue

<template>
  <ul>
    <li>{{ title }}</li>
  </ul>
</template>

仅模板 SFC：Comp1.vue

<template>
  <h1>{{ title }}</h1>
</template>

如您所见，道具是相同的，但模板却截然不同

然后我们的通用组件具有使用模板 SFC 的渲染功能的魔力：

<script setup>
import { h } from 'vue';
const props = defineProps({
  title: String,
  child: [Object, Function]
});
</script>
<template>
  <component :is="() => h(props.child.render, props)"/>
</template>

及用法：

<script setup>
import { ref } from 'vue'
import Common from './Common.vue';
import Comp from './Comp.vue'
import Comp1 from './Comp1.vue'

const toggle = ref(true);
</script>

<template>
  <common :child="toggle ? Comp : Comp1" title="Title 1"/>
  <div>
    <button @click="toggle = !toggle">Toggle</button>
  </div>
</template>