面试题：Vue中动态插槽名称的实现方式及条件渲染插槽的应用场景

Question

请阐述在Vue中如何实现动态插槽名称，并且举例说明在什么实际场景下会用到对插槽进行条件渲染。同时给出相关的代码示例。

Answer 1

实现动态插槽名称

在Vue中，可以使用v-slot指令结合JavaScript表达式来实现动态插槽名称。语法如下：

<template>
  <parent-component>
    <template v-slot:[dynamicSlotName]>
      <!-- 插槽内容 -->
    </template>
  </parent-component>
</template>

<script>
export default {
  data() {
    return {
      dynamicSlotName: 'default' // 初始值，可以动态改变
    };
  }
};
</script>

条件渲染插槽的实际场景及示例

场景

比如在一个通用的弹窗组件中，根据不同的业务逻辑，可能需要在弹窗底部渲染不同的操作按钮。例如，对于新建数据的弹窗，底部可能是“保存”和“取消”按钮；而对于编辑数据的弹窗，底部可能是“更新”和“取消”按钮。

代码示例

<template>
  <div>
    <modal :isEdit="isEdit">
      <template v-slot:header>
        <h3>{{ isEdit? '编辑数据' : '新建数据' }}</h3>
      </template>
      <template v-slot:body>
        <!-- 弹窗主体内容，这里省略 -->
      </template>
      <template v-if="isEdit" v-slot:footer>
        <button @click="updateData">更新</button>
        <button @click="closeModal">取消</button>
      </template>
      <template v-if="!isEdit" v-slot:footer>
        <button @click="saveData">保存</button>
        <button @click="closeModal">取消</button>
      </template>
    </modal>
  </div>
</template>

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

export default {
  components: {
    Modal
  },
  data() {
    return {
      isEdit: false
    };
  },
  methods: {
    saveData() {
      // 保存数据逻辑
    },
    updateData() {
      // 更新数据逻辑
    },
    closeModal() {
      // 关闭弹窗逻辑
    }
  }
};
</script>

在Modal.vue组件中：

<template>
  <div class="modal">
    <div class="modal-header">
      <slot name="header"></slot>
    </div>
    <div class="modal-body">
      <slot name="body"></slot>
    </div>
    <div class="modal-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<style scoped>
.modal {
  border: 1px solid #ccc;
  padding: 10px;
}
.modal-header {
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
}
.modal-body {
  padding: 10px 0;
}
.modal-footer {
  border-top: 1px solid #ccc;
  padding-top: 5px;
  text-align: right;
}
</style>