阅读量:0
这里写自定义目录标题
背景
举例，假设在业务中有三种类型的组件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
<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> 总结
这种方法有效提高了组件的灵活性和可维护性
