javascript - Vue.js 3 - pass contents of a component's slot to another slot outside it - Stack Overflow

admin管理员组

文章数量:1356304

I have a component Foo with the following contents:

<Bar>
  <template #option="slotProps" v-if="$slots.option">
    <slot name="option" v-bind="slotProps"></slot>
  </template>
</Bar>

<div>
  <slot :selected="selectedOption"></slot>
</div>

Is there a way to pass the contents of

<slot name="option" v-bind="slotProps"></slot>

to

<slot :selected="selectedOption"></slot>

by default, while still having the ability to override it if needed?

I tried this but it didn't work

<slot :selected="selectedOption">
  <template v-if="$slots.option">
    <slot name="option" :selected="selectedOption"></slot>
  </template>
</slot>

Edit

Got it to work with a minor change:

<slot :selected="selectedOption">
  <template v-if="$slots.option">
    <slot name="option" :option="selectedOption"/>
  </template>
</slot>

I have a component Foo with the following contents:

<Bar>
  <template #option="slotProps" v-if="$slots.option">
    <slot name="option" v-bind="slotProps"></slot>
  </template>
</Bar>

<div>
  <slot :selected="selectedOption"></slot>
</div>

Is there a way to pass the contents of

<slot name="option" v-bind="slotProps"></slot>

to

<slot :selected="selectedOption"></slot>

by default, while still having the ability to override it if needed?

I tried this but it didn't work

<slot :selected="selectedOption">
  <template v-if="$slots.option">
    <slot name="option" :selected="selectedOption"></slot>
  </template>
</slot>

Edit

Got it to work with a minor change:

<slot :selected="selectedOption">
  <template v-if="$slots.option">
    <slot name="option" :option="selectedOption"/>
  </template>
</slot>

• javascript
• vue.js
• vuejs3
• vue-component

Share Improve this question Follow edited Mar 28 at 5:37 armandino asked Mar 28 at 4:39 armandinoarmandino 18.6k1717 gold badges7474 silver badges8585 bronze badges 2

• 2 What is the goal here? To duplicate the contents of option? The more I look at this, the more it seems like you're trying to do something very unorthodox. Why don't you request help for the problem you're trying to solve, instead of asking for help on a solution you already decide you're going forward with? – Ricardo Nolde Commented Mar 28 at 4:52
• @RicardoNolde I was trying to keep the question brief. The goal is to replace primevue AutoComplete input with some custom content after user makes a selection. Sometimes this content is the same as the template for the options, but sometimes it is slightly different... – armandino Commented Mar 28 at 5:39

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

By using Vue's scoped slots and checking if the option slot is provided, you can achieve this. If the option slot exists, you can render it inside the default slot while allowing an override.

<template>
  <Bar>
    <template #option="slotProps" v-if="$slots.option">
      <slot name="option" v-bind="slotProps"></slot>
    </template>
  </Bar>

  <div>
    <slot :selected="selectedOption">
      <!-- Default to the 'option' slot if provided -->
      <template v-if="$slots.option">
        <slot name="option" :selected="selectedOption"></slot>
      </template>
    </slot>
  </div>
</template>

本文标签： javascriptVuejs 3pass contents of a component39s slot to another slot outside itStack Overflow