Subscribe on changes!

How to make slot inherit attributes?

avatar
May 6th 2022

What problem does this feature solve?

As shown below, I want to uniformly add some properties in a certain slot, and still carry these properties when the slot is replaced by the neir passed in by the parent component. How can I do this

// comp 
<template>
   <div>
      <slot />   // Add an attribute abc='attr' somehow
   </div>
</template>

// use comp
<Comp>
   <div>hello</div>
</Comp>

// Renders as
<div>
      <div abc='attr' >hello</div>
</div>

What does the proposed API look like?

I don't know if there is an official practice

avatar
May 6th 2022
<template>
   <div>
      <component :is="$slots.default()[0]" v-bind="$attrs">
   </div>
</template>
<script>
export default {
  inheritAttrs: false
}
</script>