https://github.com/jin5354/vue-slot-portal

Vue plugin for across-component slot distribution.
https://github.com/jin5354/vue-slot-portal

vue vue-slot vue2

Last synced: 1 day ago
JSON representation

Vue plugin for across-component slot distribution.

• Host: GitHub
• URL: https://github.com/jin5354/vue-slot-portal
• Owner: jin5354
• Created: 2019-04-30T09:19:39.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-05-09T09:45:19.000Z (over 5 years ago)
• Last Synced: 2024-09-23T04:32:41.010Z (5 days ago)
• Topics: vue, vue-slot, vue2
• Language: TypeScript
• Homepage:
• Size: 173 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# vue-slot-portal

[![Build Status](https://travis-ci.org/jin5354/vue-slot-portal.svg?branch=master)](https://travis-ci.org/jin5354/vue-slot-portal)

![version](https://img.shields.io/npm/v/vue-slot-portal.svg)

![mit](https://img.shields.io/npm/l/vue-slot-portal.svg)

Vue plugin for across-component slot distribution.

![sample](https://user-images.githubusercontent.com/6868950/57189626-3a1d4700-6f43-11e9-930c-a52371fe0647.png)

## install

```bash

npm i vue-slot-portal

```

## usage

1. define slot routes (key: slotName, value: componentName)

```javscript

import slotPortal from 'vue-slot-portal'

const slotRoutes = {

  level5: 'Level5'

}

Vue.use(slotPortal, slotRoutes)

```

2. write slot content anywhich component in your project, with SlotReceiver

```html

// write your slot content anywhere as you need

// someComponent.vue

  


    ...

    

      

      

        
slot content from Index receiver: {{slotProps.test}}

      

    

  


```

3. wrap your component who need the slot content with SlotInjector, when you reference this component.

```html

// Level5.vue

  


    

      default {{test}}

    

  


```

```vue

// the component which references Level5

  


    

  


import Level5 from './Level5.vue'

import slotPortal from 'vue-slot-portal'

export default {

  components: {

    // hoc

    Level5: slotPortal.SlotInjector(Level5)

  }

}

```

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