vue混入的使用mixins

关于vue的混入，官方给出是说明是这样的，这是一种非常灵活的方式，用来分发vue组件中可复用的功能。混入对象可以包含所有的组件选项。
什么意思？

使用场景

在这里我们可以看到，混入唯一的功能还是解决代码的复用问题，其实很容易理解。就是将我们组件中多次用到的功能（可以包括组件的所有选项）抽离处理，做成公共的功能，然后在需要使用的组件使用mixins进行引用。
如果多oop思想有深入理解的同学，可以参照oop思想帮助理解，和oop有一定的相似。
其中最典型也是最常用的场景就是：要求界面显示风格不一样，但是里面的数据格式，操作的功能方法都一样或者类似，这时候混入mixins就发挥的最大的作用。

实例

我们新建一个mixins文件夹用于存放我们的混入文件

testmixins.js

export const testmixins = {
    data(){
        return {
            testmixins123:"我是mixins"
        }
    },
    methods:{
        printmixins(){
            console.log('我是混入的方法');
        }
    }
} 

使用：在需要使用的组件中引入混入，混入里面的数据和方法就可以像组件自身的数据和方法使用了

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h3>{{ testmixins123 }}</h3>
  </div>
</template>

<script>
import { testmixins } from "./mixins/testmixins";
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mixins:[testmixins], // 使用混入
  mounted(){
  	// mixins的方法
    this.printmixins();
  }
}
</script>

选项合并

什么是项合并，其实我的理解叫这个名字不是很合理，不过官方就这么叫了。
意思是说：混入里面的data、method、钩子函数的合并，这里大致分两种情况说明。

1、数据data选项和方法methods选项

当data、methods选项中有同名的数据变量或者方法名，组件自身的data或methods会覆盖混入的data或者methods。

import { testmixins } from "./mixins/testmixins";
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mixins:[testmixins],
  mounted(){
    this.printmixins();
  },
  methods:{
    printmixins(){
      console.log("我是组件的方法,覆盖了混入的同名printmixins方法");
    }
  }
}

2、钩子函数

先执行混入的同一钩子函数，然后再执行组件的钩子内容，直接看代码和效果。

testmixins.js

export const testmixins = {
    data(){
        return {
            testmixins123:"我是mixins"
        }
    },
    methods:{
        printmixins(){
            console.log('我是混入的方法');
        }
    },
    created(){
        console.log('我是混入的created钩子')
      },
      mounted(){
        console.log('我是混入的mounted钩子');
      },
} 

使用的组件：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h3>{{ testmixins123 }}</h3>
  </div>
</template>

<script>
import { testmixins } from "./mixins/testmixins";
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mixins:[testmixins],
  created(){
    console.log('我是组件的created钩子')
  },
  mounted(){
    console.log('我是组件的mounted钩子');
    this.printmixins();
  },
  methods:{
    printmixins(){
      console.log("我是组件的方法,覆盖了混入的同名printmixins方法");
    }
  }
}
</script>

结果：