一个神奇的vue小插件，让你更easy得弹弹弹

2024年3月30日 136次阅读 来源: Jokcy

用了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
    原文地址: https://segmentfault.com/a/1190000006886852
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞