vue-cli混入(mixins)的理解和使用

理解

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

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

现在上例子：

1.首先先说一下单页面引入混入

• 在你项目的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],
}

2.全局注入混入

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

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

在main.js中全局注册该mixins,特别注意，注意，注意，重