前端开发:VUE之全局混入
故事背景得闲宁可散步,也不敢刷朋友圈~ 打住今天闲来翻看了卤煮在上家公司负责的项目,感觉vue应用的水准还是挺高的,以至于卤煮在新的项目中游刃有余,今天就说说vue的全局混入吧,这东西属于进阶的童鞋们不得不涉猎的技术点~mixin的使用场景项目中多次使用相同方法或变量,这时候可以借助mixin把这些方法和变量注册为全局的,然后在你需要的组件中进行调取就可以啦~,举个最简单的例子,你的项目中肯定会使
故事背景
得闲宁可散步,也不敢刷朋友圈~ 打住
今天闲来翻看了卤煮在上家公司负责的项目,感觉vue应用的水准还是挺高的,以至于卤煮在新的项目中游刃有余,今天就说说vue的全局混入吧,这东西属于进阶的童鞋们不得不涉猎的技术点~
mixin的使用场景
项目中多次使用相同方法或变量,这时候可以借助mixin把这些方法和变量注册为全局的,然后在你需要的组件中进行调取就可以啦~,
举个最简单的例子,你的项目中肯定会使用弹窗的吧,关闭弹窗的方法就可以注册为全局方法,然后混入到单个组件中,每个组件里都写一个关闭弹窗的方法是小人所为,不,是小白所为~。
mixin的用法
老规矩,看图说话~
首先,你需要有个mixins文件夹来放需要进行全局混入的方法和变量~
就拿关闭弹窗为例吧,dialogMixin.js中定义关闭弹窗的方法,然后就是调用啦~
这时,在你调用的组件中,相当于将关闭弹窗的方法合并到了单个组件的methods中,混入data也是同理~
mixin小结
mixin的全局混入不止方法和变量,你可以将它看为一个子组件,组件有的它都有,比如生命周期钩子,在组件调用mixin时,其实是将mixin和调用组件进行合并,此处借用一张图帮助理解:
但须注意一点,如果在引用mixin的同时,在组件中重复定义相同的方法,则mixin中的方法会被覆盖。
用法如此简单,还不抓紧用起来~它可以将组件化开发贯彻到底,更为高效的实现组件内容的复用,当然了,还可以取代你封装全局方法的尴尬 ~
玛德,看看人家的理解,再看看我的,low,呸!啥也不是~
原创看我,深入理解看他!
更多推荐
所有评论(0)