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

这里写自定义目录标题

• 背景
• 目标
• 步骤
• • 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

<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>  

总结

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