VueJS中如何动态设置Modal组件的内部内容？

核心思路：使用 Vue 插槽（Slots）实现内容动态分发 #

Vue 的插槽机制专门用于组件间的内容传递，完美适配你需要在不同场景下给 Modal 填充不同内容的需求。以下是具体改造步骤：

1. 改造 Modal 组件，支持插槽接收动态内容 #

修改你的 Modal.vue，在内容区域添加默认插槽，同时修正原代码中按钮事件绑定的错误（click 需改为 @click）：

<template>
  <div class="vue-modal" v-show="open">
    <div class="vue-modal-inner">
      <div class="vue-modal-content">
        <!-- 默认插槽：父组件传入的自定义内容会渲染在这里 -->
        <slot></slot>
        <!-- 保留通用关闭按钮，也可根据需求将按钮移入插槽由父组件控制 -->
        <button type="button" @click="$emit('close')" class="modal-close-btn">Close</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Modal",
  props: {
    open: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.vue-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.vue-modal-inner {
  max-width: 500px;
  margin: 2rem auto;
}

.vue-modal-content {
  position: absolute;
  min-width: 300px;
  left: 50%;
  top: 35%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.3);
  background-clip: padding-box;
  border-radius: 0.3rem;
  padding: 1rem;
}

.modal-close-btn {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
</style>

2. 父组件根据场景传入不同内容 #

在父组件中，针对删除确认、表单输入等不同场景，直接在 <Modal> 标签内写入对应内容即可：

<template>
  <div>
    <!-- 删除确认弹窗 -->
    <Modal :open="modalDelete.show" @close="modalDelete.show = false">
      <div>
        <h3>确认删除</h3>
        <p>是否删除ID为{{ modalDelete.userId }}的用户？</p>
        <button @click="handleDelete" class="confirm-btn">确认删除</button>
      </div>
    </Modal>

    <!-- 数据输入表单弹窗 -->
    <Modal :open="modalCreate.show" @close="modalCreate.show = false">
      <div>
        <h3>创建新用户</h3>
        <form @submit.prevent="handleCreate">
          <div>
            <label>用户名：</label>
            <input v-model="formData.username" type="text" />
          </div>
          <div>
            <label>邮箱：</label>
            <input v-model="formData.email" type="email" />
          </div>
          <button type="submit" class="submit-btn">提交</button>
        </form>
      </div>
    </Modal>
  </div>
</template>

<script>
import Modal from './Modal.vue';

export default {
  components: { Modal },
  data() {
    return {
      modalDelete: {
        show: false,
        userId: 5
      },
      modalCreate: {
        show: false
      },
      formData: {
        username: '',
        email: ''
      }
    }
  },
  methods: {
    handleDelete() {
      // 执行删除逻辑
      console.log('删除用户ID：', this.modalDelete.userId);
      this.modalDelete.show = false;
    },
    handleCreate() {
      // 执行创建逻辑
      console.log('创建用户：', this.formData);
      this.modalCreate.show = false;
    }
  }
}
</script>

<style scoped>
.confirm-btn {
  margin-right: 1rem;
  padding: 0.5rem 1rem;
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.submit-btn {
  padding: 0.5rem 1rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

3. 进阶优化：使用命名插槽复用通用结构 #

如果需要区分标题、内容等不同区域，可以给 Modal 添加命名插槽，进一步提升灵活性：

修改 Modal.vue 的模板部分：

<template>
  <div class="vue-modal" v-show="open">
    <div class="vue-modal-inner">
      <div class="vue-modal-content">
        <!-- 标题插槽，支持自定义或默认值 -->
        <slot name="title">提示</slot>
        <!-- 内容插槽 -->
        <slot></slot>
        <button type="button" @click="$emit('close')" class="modal-close-btn">Close</button>
      </div>
    </div>
  </div>
</template>

父组件调用时指定插槽内容：

<Modal :open="modalDelete.show" @close="modalDelete.show = false">
  <template #title>确认删除</template>
  <p>是否删除ID为{{ modalDelete.userId }}的用户？</p>
  <button @click="handleDelete" class="confirm-btn">确认删除</button>
</Modal>

内容的提问来源于stack exchange，提问作者Alvaro Navarrete