mixins的使用

mixins的使用

在vue中，组件可以提高代码复用率，
而 当多个组件中代码重复率比较高，我们可以使用 mixin 去进一步提高代码复用

mixin 是 混入 或者 混合 的意思

使用方法

1. 创建一个 mixins.js 文件夹

把那些重复的代码放进 这个 js 文件里面，并且暴露出去

export const hunhe = {
  methods: {
    showName(){
      alert(this.name)
    }
  }
}

export const hunhe2 = {
  data() {
    return {
      x:100,
      y:200
    }
  },
}

export const hunhe3 = {
  data() {
    return {
      name:'zhangsan',
      age: 18
    }
  },
  mounted(){
	this.age++
  }
}

其中可以写 vue 里面的各种配置项

注意：当写 生命周期钩子的时候，混入的部分会比组件中的部分先执行

2. 在组件中导入

1. 全部导入

   import { mixin } from "../mixins";
   

2. 部分导入

   import { hunhe, hunhe2 } from "../mixins";
   

3. 调用混合

mixins: [hunhe, hunhe2],

在 mixins 配置项中注册想要使用的 混入即可

4. 接着，直接使用这个混入里的东西即可

例如:

可以直接使用写在 混入 里面的 方法

<h2 @click="showName">学生姓名：{{name}}</h2>

mixins:[hunhe]

tips：
一个mixin.js 文件里可以写 n多个混入，当引入使用的两个 混入都写了生命周期钩子时，先调用那个就先执行哪个混入的钩子。