<p>在我的组件中，有三个带有不同内容的弹出模态框。通过点击特定按钮，我需要打开相应的弹出模态框。</p> <p>这是我正在做的事情 <strong>对于按钮1 -</strong></p> <pre class="brush:php;toolbar:false;">&lt;s-button type=&quot;button&quot; class=&quot;bl_btn&quot; @click=&quot;onClickProdOpen&quot;&gt; 产品详情 &lt;/s-button&gt;</pre> <p><strong>对于这个模态框1将是</strong></p> <pre class="brush:php;toolbar:false;">&lt;s-modal v-model=&quot;isShowPopup1&quot; :title=&quot;$t('LBL_PROD_CONT')&quot; &lt;my-component-one :pageId =&quot;this.$options.name&quot; :popupDefaultTab=&quot;popupOpenDefaultTab&quot; :onClickClose=&quot;onClickclose&quot; /&gt;</pre> <p><strong>这里是一个按钮点击方法。像这样多个不同模态框的点击事件。</strong></p> <pre class="brush:php;toolbar:false;">methods: { onClickProdOpen() { this.isShowPopup1 = true; this.popupOpenDefaultTab = 0; } }</pre> <p>&lt;s-modal是自定义模态框部分，内容将会有所不同。所以，我重复了这个模态框代码，只是改变了内容，即传递了不同的子组件（MyComponentOne，MyComponentTwo...）。</p> <p>那么，如何使用switch case语句来避免多次重复模态框代码，只需更改内部内容组件？任何建议都会有帮助。</p>

<b-modal v-model="modal_states[1]">模态框1</b-modal>
    <b-button @click="openModal(1)">打开1</b-button>
    
    <b-modal v-model="modal_states[2]">模态框2</b-modal>
    <b-button @click="openModal(2)">打开2</b-button>
    
    <b-modal v-model="modal_states[3]">模态框3</b-modal>
    <b-button @click="openModal(3)">打开3</b-button>

data: {
    modal_states: {},
  },
  methods: {
    openModal(index){
      this.modal_states = {[index.toString()]:true}
    }
  },