深入浅出之vue-cli混入(mixins)的理解和使用

个人理解

最近在开发项目过程中，发现了混入(mixins)这个好东西，于是乎就开始研究，发现很不错，不仅可以省好多代码，而且方便维护。

• 个人理解的混入就是在一个公共的实例中写入公共的数据或者方法，这样的话vue会自动注入到（全局混入会注入到每一个组件的实例中）（单页面引入的会注入到引入的组件中）。
• 混入的对象也就是minxin中可以写入的内容包含任意组件选项*******（也就是说你在export default {}里边的内容都可以混入）
• 有一种类似公共的方法的感觉，但是可以写公共的data里边的数据，这一点就比较方便了

---

基础的混入还请参考vue官网–混入
说再多都不如上例子（代码）来的实际。

step一，首先先说一下单页面引入混入

• 在你项目的components新建一个mixins.js文件，里边内容如下

const myMixin = {
    data() {
        return {
            isNoData: false,
            isShowLoding: true
        }
    }
}
export default myMixin;

• 在你需要引入的页面中注册这个mixins

import MinXin from '@/components/MinXins/index.js'
export default {
  mixins: [MinXin],
}

step二，全局注入混入

• 第一种方法：在你项目的components新建一个mixins.js文件，里边内容如下

const myMixin = {
    data() {
        return {
            isNoData: false,
            isShowLoding: true
        }
    }
}
export default myMixin;

• 在main.js中全局注册该mixins,特别注意，注意，注意，重要的事情说三遍是Vue.mixin(MinXin);是Vue.mixin(MinXin);是Vue.mixin(MinXin);不是是Vue.use(MinXin);我就在这上边吃了半天的亏，愣是不知道哪里错了。

import MinXin from '@/components/MinXins/index.js'
Vue.mixin(MinXin);

这样第一种方法，就全局注入到每一个spa实例中了。

• 第二种方法：也是官网介绍的

Vue.mixin({
    data() {
        return {
            isNoData: false,
            isShowLoding: true,
        }
    }
})

这样第二种方法，就全局注入到每一个spa实例中了。

后续

以下为mixins还可以注入方法的一个例子，引入方法同上，这里就不一 一介绍了，如果对页面传参还有理解不透彻的请移步vue $router 路由传参的4种方法详解

const myMixin = {
    data() {
        return {
            isNoData: false,
            isShowLoding: true
        }
    }
    methods: {
        jumpPage(routerName, Params) {
            if (Params) {
                this.$router.push({ path: routerName, params: Params });
            } else {
                this.$router.push({ path: routerName });
            }
        },
             FromDates(StringDate) {
            let T = "",
                N = "",
                Y = "",
                R = "";
            for (let i = 0; i < StringDate.length; i++) {
                N = StringDate.substring(0, 4) + "-";
                Y = StringDate.substring(4, 6) + "-";
                R = StringDate.substring(6, 8);
                T = N + Y + R;
                return T;
            }
        }
    }
}
export default myMixin;

• 使用页面

<template>
    <div @click="jumpPage('your router  path')"></div>
</template>
export default {
   data(){
      return{
         time:this.FromDates('20181203')
    }
   }
}

结束语

mixins的理解和使用就介绍完了，根据自己的理解在项目中运用的还算熟练，又哪里不对的地方还请多多评论指出，大家一块学习进步。