[Vuejs]-Why the v-slot did not work in a single file?

by

3👍

You are not using slots correctly. I don’t know exactly what you want to achieve but the <template v-slot> should be used in the parent component that uses your custom component.

So for example if you have this component, let’s call it foo:

<v-row>
  <v-col cols="6"> this is first box: <slot name="first" /></v-col>
  <v-col cols="6"> this is second box: <slot name="second" /></v-col>
</v-row>

so in your parent component, lets call it parentFoo:

<div>
  <foo>
     <template v-slot:first> something first.... </template>
     <template v-slot:second> something second.... </template>
  </foo>
</div>

this means that the content inside the <template v-slot:first> will be rendered inside

<v-col cols="6"> this is first box: <slot name="first" /></v-col>

so the render result will be:

<v-col cols="6"> this is first box: something first....</v-col>

you can read more about v-slot in vue docs

👤Noy Gafni

Leave a comment