这里写自定义目录标题

• 背景
• 目标
• 步骤
• • 1. 创建组件策略
  • • 1.1 定义按钮组件
    • 1.2 创建策略管理器
  • 2.创建策略上下文
  • 3.使用组件
• 总结

背景

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

目标

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

步骤

1. 创建组件策略

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

1.1 定义按钮组件

button-default.vue

button-primary.vue

button-warning.vue

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 = {   default: ButtonDefault,   primary: ButtonPrimary,   warning: ButtonWarning, };  // 获取按钮组件 export function getButtonComponent(type: ButtonType) {   return buttonComponents[type] || buttonComponents.default; }  

2.创建策略上下文

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

3.使用组件

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

总结

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