Question

我正在尝试将子组件中的HTML放在父组件中。

ChildComponent.vue

<template>
  <parent>
    <h3>test</h3>
  </parent>
</template>

很像Laravel的@yield和@section

在我的方案中，我在父<template>中为我的应用设置了菜单栏，并希望通过子组件填充其下方的空间。

有谁知道是否可以这样做和/或如何做到这一点？

Answer 1

我通过将<router-view></router-view>放在我想要子组件的地方的父组件中来解决我的问题。

我将子组件放在路由器的children中。

{
  path: '/parent',
  name: 'Parent',
  component: Parent,
  children: [
    {
      path: '/parent/child',
      name: 'Child',
      component: Child
    }
  ]
}

Answer 2

如果您只想扩展而不使用VueRouter，请查看插槽文档：https://vuejs.org/v2/guide/components.html#Single-Slot

Vuejs扩展了来自child的父组件

2 个答案: