在日常的开发中,我会遇到在不同的组件中经常会需要用到一些相同或者相似的代码,这些代码的功能相对独立。这时,我们可以通过Vue的mixin功能将相同或者相似的代码提出,这样一来既方便了代码的复用也使得维护更加容易。
这篇文章将为你讲述Vuemixin的使用方法,让你对mixin有更深入的了解。
一、mixin是什么
官方文档
混入(mixin)提供了一种非常灵活的方式,来分发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
民间解释
我们在开发组件的过程中,常常会遇到一些具有相同逻辑和功能的组件。
如果每个组件各写一套方法会导致代码冗余,后期更改的时候也要一个个的改非常的浪费时间和精力。
mixins就是将这些多个相同的逻辑抽离出来,各个组件只需要引入mixins,就能实现一次写代码,多组件受益的效果。
二、使用方法
先定义mixin:在src目录下新建mixin文件夹,然后新建index.js文件,该文件存放我们的mixin代码。
exportconstmixins={
data(){
return{};
},