Skip to content

Instantly share code, notes, and snippets.

  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save tiagofrancafernandes/2270ea06d7c2a7415e4e98aa39560869 to your computer and use it in GitHub Desktop.
dev-vuejs_snippets
<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.

Acessando Slots e Atributos na Composition API

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:

Usando o Objeto de Contexto

export default {
 setup(props, context) {
    console.log(context.slots);
    console.log(context.attrs);
 }
}

Usando Destruturação de Objeto

export default {
 setup(props, { slots, attrs }) {
    console.log(slots);
    console.log(attrs);
 }
}

Usando Slots na Composition API

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.

Exemplo de Uso de Slots

<!-- 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>

Acessando Slots e Atributos com <script setup>

Para componentes que usam a sintaxe <script setup>, a Composition API fornece composables useSlots e useAttrs para acessar slots e atributos.

Exemplo de Uso com <script setup>

<script setup>
import { useSlots, useAttrs } from 'vue'

const slots = useSlots()
const attrs = useAttrs()
</script>

Conclusão

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

Identificando o ultimo iterador

<div v-for="(item, index) in items" :key="index">
  <p>{{ item }}</p>
  <p v-if="index == items.length - 1">Este é o último item!</p>
</div>
<template>
    <div>
        <p>Count: {{ count }}</p>
        <!-- <ChildComponent /> -->
    </div>
</template>

<script lang="ts">
import { computed, defineComponent, provide } from 'vue'
//   import ChildComponent from './ChildComponent.vue'

export default defineComponent({
    components: {
    //   ChildComponent,
    },
    setup() {
        const count = computed(() => {
        return 1 + 1
        })

        provide('count', count)

        return {
        count,
        }
    },
})
</script>
// so-carrao-projetos/the-spa/components/molecules/ecommerce/AdvertisementStepper.vue
export default {
  name: 'AdvertisementStepper',
  components: {
    StepOne: () => import(/* webpackMode: "eager" */'@/components/molecules/ecommerce/steps/StepOne'),
    StepTwo: () => import(/* webpackMode: "eager" */'@/components/molecules/ecommerce/steps/StepTwo'),
    StepThree: () => import(/* webpackMode: "eager" */'@/components/molecules/ecommerce/steps/StepThree'),
    StepFour: () => import(/* webpackMode: "eager" */'@/components/molecules/ecommerce/steps/StepFour'),
    StepFive: () => import(/* webpackMode: "eager" */'@/components/molecules/ecommerce/steps/StepFive')
  },
    // ...
}
// resources/js/plugins/lang.js
import { lang } from '@/helpers/localization';

// Criação do plugin
export const LangPlugin = {
    install(app, options) {
        const _lang = (...params) => lang(...params);

        app.mixin({
            methods: {
                lang: _lang,
            },
        });

        if (parseInt(app.version) > 2) {
            app.provide('lang', _lang);
        }
    },
};
// resources/js/app.js
import { LangPlugin } from '@/plugins/lang';

// ...
createApp(...)
    .use(LangPlugin)
// ...

Visit (redirect, go to, link, route, manual visits)

import { router } from "@inertiajs/vue3";
router.visit(route('dashboard', ['aaa', { tab: e }])); // { tab: '1' } is the query parameter
<script>
import { router } from "@inertiajs/vue3";
const handleTabChange = (tab) => {
    let userId = 1;
    router.visit(route('dashboard', [ // .../dashboard?abc=&tab=tab1&user=1
            'abc',
            { tab: tab },
            { user: userId },
        ])
    );
}
</script>
<template>
    <button
        type="button"
        @click="handleTabChange('tab1')"
    >Go to tab1</button>
</template>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment