Vuejs extending a parent component from child

Question

I'm trying to put HTML from a child component in a parent component.

ChildComponent.vue

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

Much like Laravel's @yield and @section

In my scenario, I have the menubars for my app in the parent <template> and want to fill the space beneath it via the child component.

Does anyone know whether and/or how it's possible to do this?

Answer 1

I fixed my issue by putting <router-view></router-view> inside my parent component in the place where I want the child component.

And I put the child component in the children in the router.

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

Answer 2

如果您只是想在不使用 VueRouter 的情况下进行扩展，请查看插槽文档： https ://v2.vuejs.org/v2/guide/components.html#Single-Slot