前端笔记：VUE之全局混入

vue

故事背景

得闲宁可散步，也不敢刷朋友圈~ 打住

今天闲来翻看了卤煮在上家公司负责的项目，感觉vue应用的水准还是挺高的，以至于卤煮在新的项目中游刃有余，今天就说说vue的全局混入吧，这东西属于进阶的童鞋们不得不涉猎的技术点~

mixin的使用场景

项目中多次使用相同方法或变量，这时候可以借助mixin把这些方法和变量注册为全局的，然后在你需要的组件中进行调取就可以啦~，

举个最简单的例子，你的项目中肯定会使用弹窗的吧，关闭弹窗的方法就可以注册为全局方法，然后混入到单个组件中，每个组件里都写一个关闭弹窗的方法是小人所为，不，是小白所为~。

mixin的用法

老规矩，看图说话~

首先，你需要有个mixins文件夹来放需要进行全局混入的方法和变量~

就拿关闭弹窗为例吧，dialogMixin.js中定义关闭弹窗的方法，然后就是调用啦~

这时，在你调用的组件中，相当于将关闭弹窗的方法合并到了单个组件的methods中，混入data也是同理~

mixin小结

mixin的全局混入不止方法和变量，你可以将它看为一个子组件，组件有的它都有，比如生命周期钩子，在组件调用mixin时，其实是将mixin和调用组件进行合并，此处借用一张图帮助理解：

但须注意一点，如果在引用mixin的同时，在组件中重复定义相同的方法，则mixin中的方法会被覆盖。

用法如此简单，还不抓紧用起来~它可以将组件化开发贯彻到底，更为高效的实现组件内容的复用，当然了，还可以取代你封装全局方法的尴尬 ~

玛德，看看人家的理解，再看看我的，low，呸！啥也不是~

原创看我，深入理解看他！