I need to get the reference of DOM Element in Suspense #default when the resolve event of the Suspense has emitted.
<script setup>
function test(e){
console.log(e) // Expected to get <p> element ref
}
</script>
<template>
<Suspense #resolve="test">
<template #default>
<p class="text">Some async component</p>
</template>
<template #fallback>
Loading...
</template>
</Suspense>
</template>
Related
How can I render the header slot to the table component from the child component? This code is not working:
Table component
<template>
<div>
<slot name="header"></slot>
</div>
</template>
Parent component
<template>
<div>
<component :is="currentComponent" > </component>
</div>
</template>
<script>
export default {
data() {
return {
currentComponent: 'Table'
};
},
};
</script>
Child component
<template>
<div>
<parent-component>
<template slot="header">
<h1>test</h1>
</template>
</parent-component>
</div>
</template>
Tried the code above but it dosent work
Expecting to render title from child component
Solution:
Table component
<template>
<div>
<slot name="header"></slot>
</div>
</template>
Parent component
**<template>
<div>
<component :is="currentComponent" >
<template v-for="(_, name) in $slots" #[name]="slotData">
<slot :name="name" v-bind="slotData || {}" />
</template>
</component>
</div>
</template>**
<script>
export default {
data() {
return {
currentComponent: 'Table'
};
},
};
</script>
Child component
<template>
<div>
<parent-component>
<template slot="header">
<h1>test</h1>
</template>
</parent-component>
</div>
</template>
I am currently using a simple implementation of slots in Vue 2. I have my parent component using MyComponent and slotting in OtherComponent. My MyComponent code
uses <slot></slot> for the content. How would I make changes to the slots to adapt for Vue 3's v-slot since slot is deprecated?
Parent.vue
<MyComponent>
<template v-slot="slotProps">
<OtherComponent
:data="slotProps.data"
>
</OtherComponent>
</template>
</MyComponent>
MyComponent.vue
<template>
<div class="container">
<template v-for="(item, index) in data">
<slot :item="item"></slot>
</template>
</div>
</template>
In Vue JS, how to pass a component as a prop (or a slot) of another component, while been able to set it's own props from a grandchild component ?
Parent :
<template>
<Child>
<SomeComponent />
</Child>
</template>
Child :
<template>
<GrandChild>
<slot></slot>
</GrandChild>
</template>
Grandchild :
<template>
<slot :content="content"></slot> //Setting the props of <SomeComponent/> here
</template>
Use "v-slot:default"!
Parent :
<template>
<Child>
<template v-slot:default="slotProps">
<SomeComponent :content="slotProps.content"/>
</template>
</Child>
</template>
Child :
<template>
<GrandChild>
<template v-slot:default="slotProps">
<slot :content="slotProps.content"></slot>
</template>
</GrandChild>
</template>
Grandchild :
<template>
<slot :content="content"></slot>
</template>
I recommend you refer to this document.
https://v3.vuejs.org/guide/component-slots.html#scoped-slots
Passing a header component as a named slot into router-view. But router-view not exactly displaying it. Normally this was work in vue 2. But it's not with vue 3. Is the way doing it changed or is it impossible to do it now?
header component
<template>
<header id="g-header">
<figure>
<img id="logo"
src="#/assets/images/logo.jpg"
alt="The beautiful MDN logo.">
</figure>
<nav id="g-nav" class="flex justify-space-between">
<a v-for="(link, idx) in links" :key="idx"
class="flex justify-center align-center capitalize"
:href="link.val">{{ link.text }}</a>
</nav>
</header>
</template>
router-view component
<template>
<div id="moduleA" class="modules">
<router-view class="moduleA-children">
<template #header>
<app-header></app-header>
</template>
</router-view>
</div>
</template>
children view component
<template>
<div id="step1">
<slot name="header"></slot>
<div class="row">the named slot OR default slot not showing</div>
</div>
</template>
Is there a way to accomplish this? Or do I missing something here?
In Vue Router 4, <router-view> exposes the component to render as a v-slot prop, named Component, which would be used with the built-in <component> tag. You could pass any slots to the component within that <component> tag:
<router-view v-slot="{ Component }">
<component :is="Component">
<template #header>
<app-header></app-header>
</template>
</component>
</router-view>
demo
I have this component with default data that I want to reuse on other pages with other data:
CustomCard.vue
<template>
<div>
<v-layout >
<v-flex md4 class="white">
<div>
<slot class="top-img">
<img src="../assets/default.jpg" alt="">
</slot>
<slot class="description">
<p>default description</p>
</slot>
</div>
</v-flex>
</v-layout>
</div>
</template>
<script>
export default {
}
</script>
Page1.vue
<template>
<div>
<custom-card>
</custom-card>
</div>
</template>
<script>
export default {
}
</script>
Question:
What should I do in order to use CustomCard.vue component on Page1.vue page with another data:
src="../assets/image1.jpg"
"changed description"
You should import the component CustomCard in the component where you want to use it, and then add it in components option from your vue object.
After this you are ready to use it in your template.
<template>
<div id="app">
<custom-card/>
</div>
</template>
<script>
import CustomCard from './components/CustomCard' . // <-- This
export default {
components: {
CustomCard // <--This
}
}
If you want to use different data... you can pass them by props like this:
<custom-card :data="newData"/>