用了vue,react这类的框架之后,发现组件化的开发在大部分时间很方便,但是有些时候却用起来很变扭。

比如我需要自定义一个alert组件,组件写起来很方便,但是使用的时候却是这样的:

<alert :msg="msg" v-show="showAlert"></alert>
<script>
    export default {
        data() {
            return {
                msg: "this is alert msg"
            }
        }
    }
</script>

是不是很奇怪,类似alert这种组件,讲道理我们还是更习惯直接alert("xxx")这样的使用方式,因为这类组件是上下文无关的,没必要在业务场景中先定义。

现在,使用vue的童鞋可以摆脱这个窘境了,因为一个神奇的小插件出现了vue-functional-component,用了这个插件之后,你可以很方便得调用你自定义的组件,像这样子

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

你可以跟平时一样定义你的组件,而你定义的组件的props就是你调用相应方法时可以传的参数,唯一的区别是你需要额外定义一个closeprops,并在你确定要关闭该组件时调用他,我们会帮你销毁这个组件。

详细的使用方法可以直接看文档,用法很简单简洁。

9-18更新

今天发现一个大失误,原来我一直没把包发布到npm。。。赶紧发布了一下,如果有任务问题,都可以在github的issue里面提出来


Jokcy
464 声望133 粉丝

前端码农一枚