Vue 2.7 using v-slots without <template>

53 views Asked by At

I have a setup of 3 components - Wrapper, Parent, Controls

I'm rendering a Parent inside of Wrapper via a slot and I want to be able to render the Controls inside a named v-slot in the Wrapper component. I've achieved that like so:

Parent:

<Wrapper>
  <div class="parent">
    <template v-slot:controls>
      <Controls>
    </template>
  </div>
</Wrapper>

Wrapper:

<div class="wrapper">
  <slot>
  <div class="controls">
    <slot name="controls">
  </div>
</div>

This works but I want to avoid using the <template>. Removing it and replacing v-slot with the deprecated slot prop seems to also work

<Wrapper>
  <div class="parent">
    <Controls slot="controls">
  </div>
</Wrapper>

but I'm looking for a way to achieve this cleaner syntax with v-slot instead. Is that possible or am I bound to using template?

0

There are 0 answers