vue3使用策略模式管理动态组件的扩展性

背景

举例，假设在业务中有三种类型的组件button-default.vue button-primary.vue button-warning.vue 根据接口返回的类型type来控制展示。通常，我们会在代码中根据type条件判断，来控制组件的展示。但是，可预见的未来，业务类型会不断增长，每次扩展类型，都去组件使用位置去修改代码，不是很友好。所以，思考可以使用策略模式的方式来管理组件。

目标

要使用策略模式管理 button-default.vue、button-primary.vue 和 button-warning.vue 这三个组件，并且能够根据传入的 type 参数渲染对应的组件

步骤

1. 创建组件策略

首先，创建一个策略管理器，这个管理器将负责根据传入的 type 渲染正确的组件。

1.1 定义按钮组件

button-default.vue

<template>
  <button class="btn btn-default">
    <slot></slot>
  </button>
</template>

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

<style scoped>
.btn-default {
  background-color: #f0f0f0;
  color: #333;
}
</style>

</style>

button-primary.vue

<template>
  <button class="btn btn-primary">
    <slot></slot>
  </button>
</template>

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

<style scoped>
.btn-primary {
  background-color: blue;
  color: white;
}
</style>

button-warning.vue

<template>
  <button class="btn btn-warning">
    <slot></slot>
  </button>
</template>

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

<style scoped>
.btn-warning {
  background-color: orange;
  color: white;
}
</style>
</style>

1.2 创建策略管理器

创建一个工厂函数来管理不同类型的按钮组件。

import { defineComponent, Component } from 'vue';
import ButtonDefault from './button-default.vue';
import ButtonPrimary from './button-primary.vue';
import ButtonWarning from './button-warning.vue';

// 定义策略映射类型
type ButtonType = 'default' | 'primary' | 'warning';

const buttonComponents: Record<ButtonType, Component> = {
  default: ButtonDefault,
  primary: ButtonPrimary,
  warning: ButtonWarning,
};

// 获取按钮组件
export function getButtonComponent(type: ButtonType) {
  return buttonComponents[type] || buttonComponents.default;
}

2.创建策略上下文

在 Vue 组件中使用策略管理器来动态选择并渲染按钮组件。

<template>
  <component :is="buttonComponent" v-bind="attrs">
    <slot></slot>
  </component>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { getButtonComponent } from './ButtonFactory';

// 定义 Props 类型
const props = defineProps<{
  type: 'default' | 'primary' | 'warning';
}>();

// 获取组件属性
const attrs = useAttrs();

// 计算出当前的按钮组件
const buttonComponent = computed(() => getButtonComponent(props.type));
</script>

<style scoped>
/* Optionally add styles here */
</style>

3.使用组件

在应用中，使用 DynamicButton 组件来渲染不同类型的按钮。

<template>
  <div>
    <DynamicButton :type="type">Default Button</DynamicButton>
  </div>
</template>

<script lang="ts" setup>
import DynamicButton from './components/DynamicButton.vue';
import { ref } from 'vue'
const type = ref<string>('default');
</script>

总结

这种方法有效提高了组件的灵活性和可维护性