如何在路由器视图中使用插槽 [英] How to use slots in router-view
问题描述
我试图在路由器视图中使用插槽，但无法在子组件中获取插槽数据.
我搜索了很多，这个 example 似乎在单个 js 文件中工作.但是，当我在单独的文件组件中使用插槽时，它对我不起作用.
我正在使用 vue": "^2.1.2" 和 "vue-router": "^3.0.2"我试过这个代码:
AppContainer.vue
<p>这是默认插槽<p slot="测试">这是一个命名槽</p></路由器视图> ComponentA.vue
<div>...<插槽/></模板>
ComponentB.vue
<div><slot name="test"><slot/>...</模板>
route.js
<代码>{路径:'/性能'，重定向:'/性能/评估器'，成分: {渲染(c){返回 c('路由器视图')}},孩子们: [{路径:'评估者'，名称:'组件A'，组件:组件A},{路径:'管理'，名称:'组件B'，组件:组件B}]}我在两个组件中都没有得到插槽数据.
Slot 可以在 router-view 中工作，这是肯定的 => https://codesandbox.io/s/vue-routing-example-14843
我认为问题出在你配置路由的方式上，尤其是
组件:{渲染(c){返回 c('路由器视图')}},如果你想让父组件什么都不渲染，把路径配置分开会更简单
<预><代码>[//...{路径:'/性能'，重定向:'/性能/评估器'，},{路径:'/性能/评估器'，名称:'组件A'，组件:组件A，},{路径:'/性能/管理'，名称:'组件B'，组件:组件B，},];I'm trying to use slot in router-view and unable to get the slot data in child component.
I search a lot, this example seems to work in single js file. But, when I use slot in separate file component, it doesn't work for me.
I'm using vue": "^2.1.2" and "vue-router": "^3.0.2" I have tried this code:
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
}
]
}
I'm getting no slot data in both components.
Slot can work in router-view, that's for sure => https://codesandbox.io/s/vue-routing-example-14843
I believe what went wrong is the way you config the routes, especially
component: {
render(c) {
return c('router-view')
}
},
if you want the parent component to render nothing, it would be simpler to separate the path config
[
// ...
{
path: '/performance',
redirect: '/performance/evaluator',
},
{
path: '/performance/evaluator',
name: 'ComponentA',
component: ComponentA,
},
{
path: '/performance/management',
name: 'ComponentB',
component: ComponentB,
},
];
这篇关于如何在路由器视图中使用插槽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
