如何用变量字符串简单设置Slot？模态框切换场景需求

我懂你想要的是直观又不啰嗦的实现方式，不用复杂的嵌套或者绕弯子的逻辑。这里给你一个极简的Vue方案，完美适配你点击按钮切换modal header文本的需求：

核心思路 #

用一个响应式变量存header的内容，点击按钮时直接更新这个变量，然后把变量绑定到modal的header slot里就行——完全不用额外的slot操作API，逻辑直白到一眼就能看明白。

完整代码示例 #

<div id="app">
  <button @click="openModal('HELLO')">ShowModal1</button>
  <button @click="openModal('BYE!')">ShowModal2</button>

  <modal v-if="isModalOpen">
    <template #header>{{ modalHeader }}</template>
    <template #default>
      这里是Modal的主体内容区域
    </template>
  </modal>
</div>

<script>
const { createApp, ref } = Vue;

createApp({
  setup() {
    const isModalOpen = ref(false);
    const modalHeader = ref('');

    const openModal = (headerText) => {
      modalHeader.value = headerText;
      isModalOpen.value = true;
    };

    return { isModalOpen, modalHeader, openModal };
  }
}).component('modal', {
  template: `
    <div class="modal-overlay">
      <div class="modal-card">
        <header class="modal-header">
          <slot name="header">默认标题</slot>
        </header>
        <section class="modal-body">
          <slot></slot>
        </section>
        <footer class="modal-footer">
          <button @click="isModalOpen = false">关闭</button>
        </footer>
      </div>
    </div>
  `
}).mount('#app');
</script>

<style>
.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-card {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  width: 350px;
}
.modal-header {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.modal-footer {
  margin-top: 1.5rem;
  text-align: right;
}
</style>

为什么这个方案够简洁？ #

• 没有花里胡哨的slot动态切换逻辑，响应式变量直接绑定slot内容，流程一目了然
• 点击按钮只做两件事：更新文本、打开modal，所有逻辑集中在一个函数里
• Modal组件保持了slot的灵活性，同时业务逻辑完全不冗余

如果你的Modal是用第三方UI库（比如Element Plus、Vuetify）实现的，思路也完全一致：只需要用变量存储你想插入slot的内容，然后在对应slot位置渲染这个变量即可，不需要额外调用复杂API。

内容的提问来源于stack exchange，提问作者Peter Krauss