vue-slot-distributor
Vue plugin for slot across-component portal.
Last updated 5 months ago by jin5354 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vue-slot-distributor 
SYNC missed versions from official npm registry.

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

Current Tags

  • 0.1.0                                ...           latest (5 months ago)

1 Versions

  • 0.1.0                                ...           5 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |