用了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就是你调用相应方法时可以传的参数,唯一的区别是你需要额外定义一个close
props,并在你确定要关闭该组件时调用他,我们会帮你销毁这个组件。
详细的使用方法可以直接看文档,用法很简单简洁。
9-18更新
今天发现一个大失误,原来我一直没把包发布到npm。。。赶紧发布了一下,如果有任务问题,都可以在github的issue里面提出来
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。