Vue：混入插件和过滤器

Posted 2020-12-06 liangshibo

1、混入组件
　　vue实例中有这个一个属性mixins，是个数组。它的作用呢，就是将一个组件混入进另一个组件，使得两个组件的方法，属性，生命钩子啥的合二为一。使用的方式和导入类似，只不过一个放在了components中，一个放在了mixins中。当然，混入组件可没有懒加载啥的。
　　组件混入合并的时候呢，如果有不同的属性，方法，两个组件的属性方法会合并在一起。比如，组件1中混入组件2，组件1的data中有个属性叫str1，组件2有个str2.那么合并之后，组件2的data中会同时拥有str1和str2。如果两个都是str1呢，那就产生了冲突，产生冲突的属性和方法，一律以原有组件为主。
　　组件混入合并的还有生命钩子，这个不一样了，两个生命钩子中的内容会合在一起，且首先运行混入组件的内容。
　　也可以全局混入组件，但是这样的话，所有的vue实例都会被混入。慎用吧。。。

2、插件
　　插件一般是用来为vue添加全局功能，比如添加全局的方法和属性、混入全局组件、添加全局资源（指令、过滤器、过渡等）、添加第三方的类库（element-ui等）。
　　1）、插件的使用
　　引入插件，像导入组件那样。然后使用Vue.use()命令使用插件，插件名写在括号内。注意，引入插件需要在Vue实例完成前引入。
　　另外还有一个可传入的参数，Vue.use(MyPlugin, { true })，myplugin是插件名，后面的参数设置会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。
　　2）、引入Element-UI
　　首先，你要安装了nodejs和vue的脚手架（vue-cli），也就是搭建好了一个vue的项目。如果没有，我第一篇讲的就是如何安装、搭建和发布vue项目。
　　然后，使用npm i element-ui -S命令，在项目中安装element-ui的库。然后在main.js中写上下面三行代码，就可以全局使用element-ui了，但是，一定要记得，在vue实例之前插入。

import Elementui from ‘element-ui‘
import ‘element-ui/lib/theme-chalk/index.css‘;
Vue.use(Elementui)