визуализировать слот Vue в макете из компонента - PullRequest
Новая
       4

визуализировать слот Vue в макете из компонента

0 голосов
/ 17 января 2019

У меня проблемы с именованным слотом. Кажется, это должно работать. В приведенном ниже коде я пытаюсь использовать именованный слот "боковой панели". Я ожидал бы, что содержимое моего слота боковой панели будет отображаться между началом боковой панели и текстом конца боковой панели, но в этом слоте ничего не отображается. Все отображается в основном слоте.

Вот мой код.

маршрут ... 

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

Почему не работает мой слот для боковой панели?

UPDATE

Если я избавлюсь от двух строк в main.js и добавлю 

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

и 

export default {
  components: { TestLayout },

  data() {...

to Test.vue, тогда он работает.

...