<p>在我的组件中，有三个带有不同内容的弹出模态框。通过点击特定按钮，我需要打开相应的弹出模态框。</p>
<p>这是我正在做的事情
<strong>对于按钮1 -</strong></p>
<pre class="brush:php;toolbar:false;"><s-button type="button" class="bl_btn" @click="onClickProdOpen">
产品详情
</s-button></pre>
<p><strong>对于这个模态框1将是</strong></p>
<pre class="brush:php;toolbar:false;"><s-modal v-model="isShowPopup1" :title="$t('LBL_PROD_CONT')"
<my-component-one
:pageId ="this.$options.name"
:popupDefaultTab="popupOpenDefaultTab"
:onClickClose="onClickclose"
/></pre>
<p><strong>这里是一个按钮点击方法。像这样多个不同模态框的点击事件。</strong></p>
<pre class="brush:php;toolbar:false;">methods: {
onClickProdOpen() {
this.isShowPopup1 = true;
this.popupOpenDefaultTab = 0;
}
}</pre>
<p><s-modal是自定义模态框部分，内容将会有所不同。所以，我重复了这个模态框代码，只是改变了内容，即传递了不同的子组件（MyComponentOne，MyComponentTwo...）。</p>
<p>那么，如何使用switch case语句来避免多次重复模态框代码，只需更改内部内容组件？任何建议都会有帮助。</p>
1
1157
收藏
一种选择是将每个模态框的状态放在一个对象中。这样，你就不需要为每个模态框添加一个数据属性。
如果模态框内的内容足够相似，你可以使用v-for，以相同的方式使用索引作为键。
<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} } },https://codepen.io/timfranklin/pen/abWEwLy?editors=1111