学习Vue混入、插件、scoped总结

今天主要学习了Vue的mixin混入、插件、scoped样式。混入的作用是把多个组件的共用配置提取成一个对象，而这个对象就称之为混入或者是混合，它也分为局部混合和全局混合两种，使用混合之前当然是要先定义混合，定义混合的文件名一般叫mixin.js，里面需要写成一个对象的形式，对象里面的内容和我们平时Vue实例对象里面写的配置项和具体的内容一样（可写多个），最后通过export将其暴露出去，这样我们就可以在组件内容引入混合了，引入完之后接下来就是应用混合，应用混合需要在组件的实例对象内填写一个名为mixins的配置项，该配置项里面需要写成数组的形式，混合名就作为元素（可以应用多个混合），这样组件不但有了自身的功能还有了混合文件里面的功能，如果组件和混合有冲突那么组件的优先级更高，上面说到的是局部混合，如要配置全局混合就需要找到Vue的原型也就是main.js入口文件，在该文件中同样先引入混合再通过Vue.mixin（混合名）的形式来配置全局混合，这时引入到该文件的组件都拥有了混合上面的功能，但全局混合的弊端就是它是通过给Vue原型上添加的混合，导致Vue原型自身变大。

插件是用来增强Vue的，可以理解成给Vue的身上加功能，把这些功能都汇集到一起然后放到一个文件内，这个文件一般起名为plugins.js，Vue要求我们把功能写成一个对象的形式且对象内要有一个名为install的方法，这个方法的第一个参数是Vue，从第二个参数开始就是使用插件时我们给它传入的数据，在方法内我们需要写成Vue.配置项（具体内容），平时我们在Vue实例对象里面写的配置项这些在这个方法里面都可以写，但这只是定义了插件（记得暴露出去）还没有引入和应用，引入和应用一样是来到入口文件main.js文件中书写，引入的语法就不过多重复了，重点是应用语法Vue.use（插件名），这样Vue身上就多了插件上的功能，直接使用即可，有些插件我们需要传入参数时只需在应用插件时在插件名后面输入参数，那么定义插件那边就会收到我们传入的参数。

最后就是scoped样式，这个比较好理解，当我们引入的组件比较多时，难免会出现比如组件之间的样式起冲突了（元素的类名、id相同了等等的情况），这时样式就会就会应用后引用的组件样式，但这不是我们想要的效果，我们想要的效果是组件的样式直接有冲突但都不会相互影响，这时我们就是需要在组件的style样式标签中添加一个scoped，写法是这样的<style scoped>，配置了这个之后该样式标签中的所有样式都只是局部作用也就是该组件自己的标签元素才生效，不会影响到其他组件的样式，在开发中一般都会给每个组件的style标签添加scoped，这样就避免了全部的冲突，这里style还有可以配置一个属性就是lang，这里可以通过赋值的方式调整样式的编译语法，比如说是用css还是less编译。