在Vue中的命名插槽之间切换内容

Question

我想根据数据navLocation更改内容在哪个插槽中呈现。但是唯一的默认方法是渲染任何内容，在切换数据后，它将删除所有内容并保持渲染位置不变（空div）。

我的两个位置是default和navTop：

<template>
  <div>
    <template>
      <slot></slot>
    </template>

    <div>
      <ul class="nav-bar">
        // nav bar code
      </ul>
    </div>

    <template>
      <slot name="navtop"></slot>
    </template>
  </div>
</template>

以下数据和方法：

      data() {
    return {
      navLocation: "default"
    };
  },
  methods: {
    switchSlot() {
      this.navLocation == "default"
        ? (this.navLocation = "navTop")
        : (this.navLocation = "default");

入口点模板是：

<div id="container">
    <button class="toggle" @click="switchSlot()">Switch</button>
    <tabs>
      <tab title="About">
        <template v-slot:[navLocation]>
          <profile></profile>
        </template>
      </tab>
    </tabs>
</div>

所需的效果是在触发switchSlot（）之后将导航置于顶部或底部。

有人可以看到我在做什么吗？