vue-functional-component

Imagine you have a component called Alert, will you use it like this?

<template>
    <alert :msg="msg"/>
</template>
<script>
    export default {
        data() {
            return {
                msg: 'this is alert msg'
            }
        }
    }
</script> 

or like this?

<script>
    export default {
        ready() {
            this.$alert({
                msg: 'this is alert msg'
            })
        }
    }
</script>

Yeah, we help you do this!

Install

npm i vue-functional-component --save

Usage

import Vue from 'vue'
import functionalComponentFactory from 'vue-functional-component'
const makeFunctionalComponent = functionalComponentFactory(Vue)

// make sure your component is declared at global
makeFunctionalComponent('name', {config})

Config

renderToBody

是否将组建渲染到body,默认为true

componentName

组件名称

functionName

方法名称,如果在调用makeFunctionalComponent时没有传name,则使用该参数

appendToGlobal

是否挂载到global(window)对象上

appendToVue

是否将方法挂载到Vue对象上

注意

你的组件内部必须定义一个叫close的props，并且在你希望彻底关闭这个组件的时候调用他， 这样我们可以为你销毁这个组件，不然他会一直存在。