How to render VueJS Slot in a another component-CodePudding

VueJS slot could be placed anywhere inside a parent component.

However, I have a use case where I need to show a slot in another (foreign) component outside the parent component.

For example, I have component Student:

<template>
  <slot name="detail" />
  <slot name="status" /> <!-- I don't want to render this slot inside this component, but somewhere else -->
</template>

I want to display the student's status in a header section outside the student component as below:

<div >
  <!-- student status slot should go here-->
  <student-status-slot></student-status-slot>
</div>

<div >
  <student>
    <template #detail>This the detail information about student</template>
    <template #status>Grade A</template>
  </student>
</div>

You may suggest to create a new "student-status-slot" component. However, the idea is to have all student related information, including "status" declared under the component, but render some of the slot somewhere else.

I have tried another approach creating a separate component and pass the status data via prop. But That is not what I wanted to achieve. I don't want to pass data, but re-use the student status component, which can be dynamic.

CodePudding user response：

In a parent component you can access child's slots by adding ref attribute to child, and then render the VNode obtained. See the demo here https://codesandbox.io/s/happy-einstein-9f5rke?file=/src/components/StudentPage.vue

But actually I wouldn't recommend this way such it's not conventional and slots were not designed for this. I think you should rather consider using portals (Vue 3 portals or https://www.npmjs.com/package/portal-vue if you use Vue 2) to achieve your goal