vue-slot-portal
Vue plugin for across-component slot distribution.
install
npm i vue-slot-portal
usage
- define slot routes (key: slotName, value: componentName)
import slotPortal from 'vue-slot-portal' const slotRoutes = { level5: 'Level5'} Vue.use(slotPortal, slotRoutes)
- write slot content anywhich component in your project, with SlotReceiver
// write your slot content anywhere as you need// someComponent.vue ... <!-- 'level5' slot content --> slot content from Index receiver: {{slotProps.test}}
- wrap your component who need the slot content with SlotInjector, when you reference this component.
// Level5.vue default {{test}}
// the component which references Level5<template> <div class="level4"> <Level5></Level5> </div></template> <script>import Level5 from './Level5.vue'import slotPortal from 'vue-slot-portal' export default { components: { // hoc Level5: slotPortal.SlotInjector(Level5) }}</script> <style></style>
then, the slot content whose name is 'level5' will be transported to the component whose name is 'Level5', according to the slot routes.
license
MIT