<script setup>
import { useSlots, useAttrs } from 'vue'
const slots = useSlots()
const attrs = useAttrs()
</script>
<template>
<template
v-if="!slots.default"
>
<button type="button">button</button>
</template>
<template v-else>
<button type="button"><slot/></button>
</template>
</template>
Para acessar slots e atributos (attrs) usando a Composition API no Vue.js, você precisa entender como a função setup
funciona e como ela fornece acesso ao contexto do componente. A Composition API introduziu uma nova maneira de acessar e manipular slots e atributos, diferente da Options API, que usava o objeto this
para acessar esses recursos.
Na Composition API, o contexto do componente, que inclui slots e atributos, é passado como o segundo argumento para a função setup
. Você pode acessar slots e atributos diretamente através desse objeto de contexto. Aqui estão exemplos de como fazer isso:
export default {
setup(props, context) {
console.log(context.slots);
console.log(context.attrs);
}
}
export default {
setup(props, { slots, attrs }) {
console.log(slots);
console.log(attrs);
}
}
Os slots são espaços reservados em um componente Vue.js que permitem que o conteúdo seja passado de um componente pai para um componente filho. Eles são definidos dentro do bloco <template>
de um componente Vue.js e podem ser usados para injetar conteúdo dinâmico.
<!-- MyButton.vue -->
<template>
<button>
<slot></slot>
</button>
</template>
<!-- Parent of button -->
<template>
<my-button>
This is going to be placed where the slots are <b>Also accept HTML and components</b>
</my-button>
</template>
Para componentes que usam a sintaxe <script setup>
, a Composition API fornece composables useSlots
e useAttrs
para acessar slots e atributos.
<script setup>
import { useSlots, useAttrs } from 'vue'
const slots = useSlots()
const attrs = useAttrs()
</script>
A Composition API oferece uma maneira poderosa e flexível de acessar e manipular slots e atributos em componentes Vue.js. Ao usar a função setup
e os composables useSlots
e useAttrs
, você pode criar componentes mais dinâmicos e reutilizáveis, aproveitando ao máximo os recursos do Vue.js [1][2][3][4][5].
Citations: [1] https://dev.to/zelig880/how-to-use-slots-and-attrs-with-the-composition-api-k75 [2] https://learnvue.co/articles/vue-context-argument [3] https://stackoverflow.com/questions/60202724/vue-3-composition-api-and-access-to-vue-instance [4] https://vuejs.org/api/composition-api-setup.html [5] https://vuejs.org/guide/components/slots.html [6] https://doc.vueframework.com/api/composition-api.html [7] https://vue-community.org/vue/comprehensive-guide-to-vue-js-slots-mastering-component-composition.html [8] https://www.stackovercloud.com/2021/12/03/how-to-make-your-vue-js-application-dry-with-slots-mixins-and-composition-api/ [9] https://v2.vuejs.org/v2/guide/components-slots.html [10] https://markus.oberlehner.net/blog/context-and-provider-pattern-with-the-vue-3-composition-api/ [11] https://www.webmound.com/vue-context-argument-composition-api-script-setup/ [12] https://vuejs.org/guide/extras/render-function.html [13] https://www.nightprogrammer.com/vue-3/how-to-use-slots-in-composition-api-in-vue-js-3-example/ [14] https://staging-cf.vuejs.org/guide/components/slots [15] https://medium.com/dana-engineering/complete-guide-vue-3-composition-api-284e19ee0831