javascript - vue js槽没有出现模板布局的数据

Question

我第一次在 vue.js 中使用插槽进行布局。根据参考，我包含了该组件并在需要它的适当位置使用了 slot 标签，但是 slot 标签仍然无法呈现我想要在布局页面上显示的标签或数据。我在控制台日志中没有发现错误，我的页眉组件和页脚组件被成功包含，并出现在网页上。但插槽标签不起作用。这是我的代码。请帮我找出我的错误。

插槽测试.vue

<template>
  <div>
    <test-component>
      <h1>Testing Slots</h1>
    </test-component>
  </div>
</template>

<script>
import TestComponent from "./Test";
export default {
  components: { TestComponent },
};
</script>

测试.vue

<template>
  <div>
    <header-content> </header-content>
    <slot> </slot>
    <footer-content> </footer-content>
  </div>
</template>
    
<script>
import HeaderContent from "./Header";
import FooterContent from "./Footer";
export default {
  components: { HeaderContent, FooterContent },
};
</script>