Vuejs - Create a parent component

Question

Is it possible to create parent (wrapper) components in Vue? I've looked and I haven't been able to find anything

What I have in mind is the following (the v-something components are from the vuetify library):

//cardWrapper.js
<template>
  <v-card>
    <v-row>
      <v-col>
      </v-col>
    </v-row>
  </v-card>
<template>

<script> 
  export default {
    blabla
  } 
</script>

then this should somehow be available so that I can in the main file

// index.vue
<template>
  <cardWrapper>
    <v-btn>Click Me!</v-btn>
  </cardWrapper>
</template>

I'm guessing this is a straightforward process and that I simply haven't been googling it correctly. The only thing I've been able to find was to use dynamic components, but I would rather not pass components as properties

possible duplicate of https://stackoverflow.com/questions/53430731/vuejs-nested-slots-how-to-pass-slot-to-grandchild — Casper, Sep 22 '19 at 09:36
I think what you're describing is just a regular component with a slot. https://vuejs.org/v2/guide/components-slots.html — bernie, Sep 22 '19 at 10:38
oh god I had already tried this but I accidentally always typed 'span' instead of 'slot' — isebarn, Sep 22 '19 at 11:11

score 0 · Accepted Answer · answered Sep 22 '19 at 11:13

0

Here's the answer:

custom component

//custom-parent.vue
<template>
  <custom-parent>
    <slot/>
  </custom-parent>
</template>

main file

//index.vue
<template>
  <custom-parent>
    <a>Hellohello</a>
  </custom-parent>
</template>

answered Sep 22 '19 at 11:13

isebarn

3,812
5
22
38

Vuejs - Create a parent component

1 Answers1