Vue.js 从组件渲染布局中的Vue插槽

我有一个命名槽的问题。这似乎应该奏效。在下面的代码中，我试图使用一个名为slot的“侧边栏”。我希望我的边栏窗口内容在边栏开始和边栏结束文本之间显示，但在该窗口中没有显示任何内容。所有内容都在主窗口中渲染

这是我的密码

路线

{
  path: "/test",
  name: "test",
  meta: {
    layout: "test-layout"
  },
  component: () =>
    import("@/pages/Test.vue")
},

和App.vue模板

<template>
  <div id="app">
    <component  :is="layout">
      <router-view />
    </component>
  </div>
</template>

为什么我的边栏插槽不工作

更新

如果我去掉main.js中的两行并添加

import TestLayout from "@/layouts/test-layout.vue";

及

---

若要测试.vue，则它可以工作。

请提供控制台错误。没有控制台错误。奇怪的是，如果我从main.js中删除导入并将其添加到Test.vue中，那么它就可以正常工作。我更愿意全局定义布局，而不是将它们导入每个组件。是否将

“/layouts/test layout/vue”

和

“@/layouts/test layout.vue”

解析到相同的文件位置？应该这样做。我的项目中只有一个test-layout.vue，它不会因为找不到它而抛出错误。我正在使用vue loader的旧版本（13.7.3）来利用SFC。我想知道是否值得从CLI中存根一个新项目，然后将我的东西放到其中，看看它能做什么。

<template>
  <test-layout>
    <span slot="sidebar">sidebar slot content {{forecast.todaySummary}}</span>
    <div>main slot content {{forecast.currentSummary}}</div>
  </test-layout>
</template>

<script>
import api from "@/js/web-services";
export default {
  data() {
    return {
      forecast: null
    };
  },
  created() {
    api.getDailyForecast().then(response => {
      this.forecast = response.data;
    });
  }
};
</script>

import TestLayout from "./layouts/test-layout.vue";
Vue.component('test-layout', TestLayout);

import TestLayout from "@/layouts/test-layout.vue";

export default {
  components: { TestLayout },

  data() {...