Estoy tratando de crear un componente que contenga toda mi lógica en el componente de selección de vue select y tengo un problema con la parte de la ranura. Con vue-select, tiene una ranura dentro de v-select para manejar datos especiales como este:
<template> <div class="select"> <v-select :label="label" :options="options"> <!-- Slot if no results on search --> <template slot="no-options"> <slot name="no-results">Here I can set data from the parent component</slot> </template> </v-select> </div> </template>En este caso, los datos son estáticos, así que puedo usar una ranura y agregar los datos aquí, no hay problema. Pero como puede ver aquí para la segunda ranura:
<template> <div class="select"> <v-select :label="label" :options="options"> <!-- Slot if no results on search --> <template slot="no-options"> <slot name="no-results">Here I can set data from the parent component</slot> </template> <!-- Slot of the placeholder when option is selected --> <template slot="selected-option" slot-scope="option"> <slot name="selected-option">{{ option.label }}</slot> </template> </v-select> </div> </template> Usamos slot-scope="option" y tenemos dos niveles entre el padre y el hijo. Entonces, ¿es posible tener un slot-scope con dos niveles de jerarquía o necesito encontrar otra forma de hacerlo?