Tengo un componente que está destinado a representar un componente u otro según la presencia de un indicador de función. Esto se hace a través de la propiedad :is en el component componente dinámico.

 <template> <component :is="hasFF ? 'ButtonTwo' : 'ButtonOne'" v-bind="$attrs" /> </template> <script> import ButtonOne from './ButtonOne.vue' import ButtonTwo from './ButtonTwo.vue' import { BUTTON_TWO } from '@/constants/feature_flags' import { mapGetters } from 'vuex' export default { name: 'ButtonWrapper', components: { ButtonOne, ButtonTwo, }, computed: { ...mapGetters(['hasFeatureFlag']), hasBittsTwo () { return this.hasFeatureFlag(BUTTON_TWO) }, }, } </script>

Sin embargo, tanto ButtonOne como ButtonTwo en este ejemplo contienen ranuras. Por ejemplo, aquí hay un uso artificial del primer botón:

 <ButtonOne> <slot name="icon"> <button>Click Me</button> <div>Some more text</div> </ButtonOne>

¿Cómo puedo escribir un componente contenedor que verifique la presencia de un indicador de función y luego represente sus elementos secundarios, incluso pasando todos sus accesorios y representando adecuadamente sus ranuras? ¿Podría lograrse esto más fácilmente utilizando una función de renderizado y, de ser así, cómo?