Menu
In vuejs, is there a way to set the same content for multiple slots without copy pasting?
So this:
<base-layout>
<template slot="option">
<span :class="'flag-icon-' props.option.toLowerCase()" />{{ countriesByCode[props.option] }}
</template>
<template slot="singleLabel">
<span :class="'flag-icon-' props.option.toLowerCase()" />{{ countriesByCode[props.option] }}
</template>
</base-layout>
Could be written that way:
<base-layout>
<template slot="['option', 'singleLabel']">
<span :class="'flag-icon-' props.option.toLowerCase()" />{{ countriesByCode[props.option] }}
</template>
</base-layout>
Thanks a lot.
800
slotProps is just a variable we used to access the props we passed. You can also avoid setting a variable just to hold the props you pass to the child component, by destructuring the object on the fly: <page> <template v-slot="{ dogName }"> {{ dogName }} </template> </page>
Slot props allow us to turn slots into reusable templates that can render different content based on input props. This is most useful when you are designing a reusable component that encapsulates data logic while allowing the consuming parent component to customize part of its layout.
Scoped slots allow you to pass a template to the slot instead of passing a rendered element. It's called a "scoped" slot because although the template is rendered in the parent scope, it will have access to certain child data. For example, a component child with a scoped slot might look like the following.
You could try using v-for for that.
<base-layout>
<template :slot="slotName" v-for="slotName in ['option', 'singleLabel']">
<span :class="'flag-icon-' props.option.toLowerCase()" />{{ countriesByCode[props.option] }}
</template>
</base-layout>See working example.
126
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
