Как использовать слоты в режиме роутера - PullRequest
Новая
       8

Как использовать слоты в режиме роутера

0 голосов
/ 29 октября 2019

Я пытаюсь использовать слот в просмотре маршрутизатора и не могу получить данные слота в дочернем компоненте.

Я много ищу, этот пример , похоже, работает в одном jsфайл. Но когда я использую слот в отдельном файловом компоненте, он не работает для меня.

Я использую vue ":" ^ 2.1.2 "и" vue-router ":" ^ 3.0.2 "Я попробовал этот код:

AppContainer.vue 

<router-view>
  <p> This is a default slot</p>
  <p slot="test"> This is a named slot</p>
</router-view>

ComponentA.vue 

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

ComponentB.vue 

<template>
  <div>
    <slot name="test"><slot/>
    ...
  </div>
</template>

route.js 

{
  path: '/performance',
  redirect: '/performance/evaluator',
  component: {
     render(c) {
       return c('router-view')
     }
  },
  children: [
     {
       path: 'evaluator',
       name: 'ComponentA',
       component: ComponentA
      },
      {
        path: 'management',
        name: 'ComponentB',
        component: ComponentB
      }
   ]
}

Я не получаю данные слота воба компонента.

1 Ответ

1 голос
/ 31 октября 2019

Слот может работать в router-view, это точно => https://codesandbox.io/s/vue-routing-example-14843

Я полагаю, что вы ошиблись в настройке маршрутов, особенно 

 component: {
     render(c) {
       return c('router-view')
     }
  },

, если выесли родительский компонент ничего не отображает, было бы проще отделить путь конфигурации 


[
  // ...
  {
    path: '/performance',
    redirect: '/performance/evaluator',
  },
  {
    path: '/performance/evaluator',
    name: 'ComponentA',
    component: ComponentA,
  },
  {
    path: '/performance/management',
    name: 'ComponentB',
    component: ComponentB,
  },
];
...