Leverage the properties from a slot in Vue to use as local component data

Question

Leverage the properties from a slot in Vue to use as local component data

Hello, I am currently using a layout that contains a slot where I render my pages. The layout fetches some data when rendered and passes it to the slot as props. While I can easily access the props within the template, I'm unable to use it as local data. My intention was to utilize this data as a filter while fetching additional data.

<template lang="">
    <Layout v-slot:default="{ apptAccess }">
        <h1>{{ apptAccess.ticketStatus }}</h1>

        <h1>Mentors</h1>
        <div class="grid grid-cols-4 gap-5 mx-auto my-10">
            <div class="mx-auto" v-for="Person in persons">
                <PersonCard :PersonDetails="person" />
            </div>
        </div>
    </Layout>
</template>
<script>

data() {
        return {
            mentors: [],
            apptAccess: null,
        };
    },

I've encountered an issue with not being able to access the slots. Any assistance on resolving this matter would be greatly appreciated. Thank you!

vue.js

Answer 1

Answer №1

Vue SFC Playground

Use defineExpose() to expose your data to the parent component and access it through a template ref:

Layout.vue

<script setup>
import {reactive} from 'vue';
const apptAccess = reactive({});
defineExpose({apptAccess});
setTimeout(()=>Object.assign(apptAccess, {ticketStatus:'Ticket status: ok'}), 1000);
</script>

<template>
  <div>
    <slot v-bind="{apptAccess}"/>
  </div>
</template>

App.vue

<script setup>
import Layout from './Layout.vue';
import {ref} from 'vue';
const $layout = ref();
setTimeout(() => alert($layout.value.apptAccess.ticketStatus), 2000);
</script>

<template lang="">
    <Layout ref="$layout" #="{apptAccess}">
        <h1>{{ apptAccess.ticketStatus }}</h1>
    </Layout>
</template>

But there is a more efficient method of lifting the state to the parent component and accessing it in the child using either provide/inject or v-model. It's always better when the data fetch is done within the parent component to avoid mutations outside its scope.

Vue SFC Playground: provide/inject example

Answer 2

Vue SFC Playground

Use defineExpose() to expose your data to the parent component and access it through a template ref:

Layout.vue

<script setup>
import {reactive} from 'vue';
const apptAccess = reactive({});
defineExpose({apptAccess});
setTimeout(()=>Object.assign(apptAccess, {ticketStatus:'Ticket status: ok'}), 1000);
</script>

<template>
  <div>
    <slot v-bind="{apptAccess}"/>
  </div>
</template>

App.vue

<script setup>
import Layout from './Layout.vue';
import {ref} from 'vue';
const $layout = ref();
setTimeout(() => alert($layout.value.apptAccess.ticketStatus), 2000);
</script>

<template lang="">
    <Layout ref="$layout" #="{apptAccess}">
        <h1>{{ apptAccess.ticketStatus }}</h1>
    </Layout>
</template>

But there is a more efficient method of lifting the state to the parent component and accessing it in the child using either provide/inject or v-model. It's always better when the data fetch is done within the parent component to avoid mutations outside its scope.

Vue SFC Playground: provide/inject example

Leverage the properties from a slot in Vue to use as local component data

Answer №1

Similar questions

In Vue js, a continuous function is executed to check the user's current online or offline status

Laravel's Vue component is experiencing issues with loading Axios response data

Vue/Vuex - using async dispatch for AJAX requests in multiple components

Remove repeated selections in a dropdown menu using Vue JS

What is the best way to send a JSON object in Vue.js?

Tips for writing unit tests for components using vitest in the latest version of Nuxt

can a computed property be delayed in its calculation?

Having trouble navigating to the bottom of a VUEJS app?

When a Javascript function marked as async is executed, it will return an object

Utilizing markers for gaming in a data table with Vue and Vuetify

"Customize the bar colors in Vuetify sparkline to create a unique and

Refresh a component by utilizing Vuex getters

Learn how to read the contents of a v-textarea line by line with the help of JavaScript in V

Is there a way for me to customize the footer of the modal in Vue CoreUI?

Guide on incorporating dynamic markers into MapBox using Vue/Nuxt

Encountering a problem while running npm build (PostCSS plugin postcss-purgecss needs PostCSS 8) on vuejs3 with tailwind

Expand or collapse level 1 nodes with v-treeview component

The Vite build tool creates unique CSS module classes for each component

The difference between emitting and passing functions as props in Vue

How to manually add the $store parameter to a dynamically created Vue component that is missing it during creation