Question

我在使用命名插槽时遇到了问题。这似乎应该工作。在下面的代码中，我尝试使用命名的插槽“ sidebar”。我希望我的侧边栏插槽内容显示在“侧边栏开始”和“侧边栏结束”文本之间，但该插槽中什么也没有显示。一切都呈现在主插槽中。

这是我的代码。

路线...

{
  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>

和测试版式...

<template>
  <div>
    <div>
      <h1>Sidebar starts</h1>
      <slot name="sidebar"/>
      <h1>Sidebar ends</h1>
    </div>
    <div class="container">
      <h1>Content starts</h1>
      <slot/>
      <h1>Content ends</h1>
    </div>
  </div>
</template>

和页面Test.vue ...

<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>

以及在main.js中的导入

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

我的侧边栏插槽为什么不起作用？

更新

如果我摆脱了main.js中的两行并添加

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

和

export default {
  components: { TestLayout },

  data() {...

然后进入Test.vue。

在组件的布局中渲染Vue插槽

0 个答案: