如何实现Vue组件的策略模式

<template>
  <div>
    <button @click="changeStrategy('A')">选择策略A</button>
    <button @click="changeStrategy('B')">选择策略B</button>
    <button @click="changeStrategy('C')">选择策略C</button>

    <component :is="currentStrategy"></component>
  </div>
</template>

<script>
import StrategyA from './StrategyA.vue'
import StrategyB from './StrategyB.vue'
import StrategyC from './StrategyC.vue'

export default {
  components: {
    StrategyA,
    StrategyB,
    StrategyC
  },
  data() {
    return {
      currentStrategy: 'StrategyA'
    }
  },
  methods: {
    changeStrategy(strategy) {
      this.currentStrategy = strategy
    }
  }
}
</script>