面试题：Vue v - slot指令与动态插槽名的结合应用

Question

在Vue项目中，你需要实现一个通用的导航栏组件`NavBar`，该组件有多个插槽，插槽名根据用户当前操作动态变化。例如，用户点击不同按钮，需要将不同的内容通过`v - slot`插入到不同插槽中，插槽名分别为`active - slot - 1`、`active - slot - 2`、`active - slot - 3`等。请描述实现此功能的思路，并给出关键的Vue代码片段（包括组件定义及父组件调用）。

Answer 1

实现思路

1. 在 NavBar 组件中定义动态插槽，通过 v - slot 的动态语法来接收不同插槽名的内容。
2. 在父组件中，根据用户点击按钮的不同状态，决定传递给 NavBar 组件哪个插槽的内容。

关键Vue代码片段

NavBar 组件定义

<template>
  <div>
    <slot :name="dynamicSlotName"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicSlotName: 'active - slot - 1' // 默认插槽名
    };
  }
};
</script>

父组件调用

<template>
  <div>
    <NavBar>
      <template v - slot:active - slot - 1>
        <p>这是active - slot - 1的内容</p>
      </template>
      <template v - slot:active - slot - 2>
        <p>这是active - slot - 2的内容</p>
      </template>
      <template v - slot:active - slot - 3>
        <p>这是active - slot - 3的内容</p>
      </template>
    </NavBar>
    <button @click="changeSlot('active - slot - 1')">显示slot1</button>
    <button @click="changeSlot('active - slot - 2')">显示slot2</button>
    <button @click="changeSlot('active - slot - 3')">显示slot3</button>
  </div>
</template>

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

export default {
  components: {
    NavBar
  },
  methods: {
    changeSlot(slotName) {
      this.$refs.navBar.dynamicSlotName = slotName;
    }
  }
};
</script>