npm

Share private packages across your team with npm Orgs, now with simplified billing via the aws marketplace!Learn more »

vue-slot-portal

0.3.0 • Public • Published

vue-slot-portal

Vue plugin for across-component slot distribution.

sample

install

npm i vue-slot-portal

usage

  1. define slot routes (key: slotName, value: componentName)
import slotPortal from 'vue-slot-portal'
 
const slotRoutes = {
  level5: 'Level5'
}
 
Vue.use(slotPortal, slotRoutes)
  1. write slot content anywhich component in your project, with SlotReceiver
// write your slot content anywhere as you need
// someComponent.vue
 
<template>
  <div class="somewhere">
    ...
    <SlotReceiver>
      <!-- 'level5' slot content -->
      <template v-slot:level5="slotProps">
        <div>slot content from Index receiver: {{slotProps.test}}</div>
      </template>
    </SlotReceiver>
  </div>
</template>
  1. wrap your component who need the slot content with SlotInjector, when you reference this component.
// Level5.vue
<template>
  <div class="level5">
    <slot name="level5" v-bind:test="test">
      default {{test}}
    </slot>
  </div>
</template>
// 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

Keywords

none

install

npm i vue-slot-portal

Downloadsweekly downloads

0

version

0.3.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability