Vue-组件混入Mixin配置-减少代码冗余

Vue-组件混入Mixin配置

1. 什么是Mixin?

学过面向对象的小伙伴，应该对Mixin这个词不陌生，尤其是Python中的多继承，Py后端小伙伴在Django中也许对Mixin这个词太熟悉了。

其实简单来讲，Mixin就是"添加功能"，也可以说成"插件"

• 将一个功能封装成一个对象
• 例如我们定义了一个游泳的插件，谁插上这个插件，就学会了游泳。

2. Vue中的Mixin

Vue中称Mixin为"混入"，就是多个组件共享一个相同的配置

2.1 需求分析

现在我们需要，让用户页面上的信息时，就弹窗提示

例如如下:

<template>
  <div>Student组件
    <span @click="showName">学生姓名:***</span>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      name: "小王"
    }
  },
  methods: {
    showName() {
      alert(this.name) //alert弹窗提示
    }
  }
}
</script>

这样看确实没啥，但是如果我这个功能，要在很多组件都要用，也就是说我现在Student组件要用，Teacher组件也要用，难道我就一直复制粘贴嘛？？？显然不可能

此时，我们就可以创建一个mixins.js，用于定义我们重复使用的函数

2.1 mixin.js的定义

mixin.js

export const mixin = {
    methods: {
        // 相当于全局定义了一个函数,showName
        showName() {
            alert(this.name)
        }
    }
}

2.2 组件中引入mixin

<template>
  <div>
      <!--  这里绑定了mixin的showName函数  -->
    <span @click="showName">老师姓名:***</span>
  </div>
</template>

<script>
import {mixin} from "@/mixins";
export default {
  name: "Teacher",
  data() {
    return {
      name: "李老师"
    }
  },
  mixins:[mixin] // 只需要引入mixin就可以
}
</script>

2.3 mixin的参数定义

mixin其实就相当于帮我们把需要重复定义的数据全部统一配置，减少代码冗余

所以我们mixin不仅可以配置methods，还可以配置data，mount

下面的mixin我额外配置了data，里面包含了name参数

export const mixin = {
    data(){
        return {
            name:"mixin配置的name"
        }
    },
    methods: {
        showName() {
            alert(this.name)
        }
    }
}

此时，如果我们哪个组件没有name，则会按照mixin中的name进行赋值，如果已经引入，则会将mixin中的覆盖！

2.4 mixin注意事项(生命周期函数)

对于Vue中的生命周期函数，mixin的引入，并不会覆盖函数，而是依次执行

并且执行顺序： mixin中的生命周期先执行

我们现在mixin的生命周期函数mounted中写了一个事件

mixin中定义

export const mixin = {
    mounted() {
        console.log('我是mixin中的mounted函数!!')
    }
}

组件中也定义

mounted() {
	console.log('我是组件中的mounted函数!!')
}

我们可以发现，mixin中的mounted函数，比组件中的更早被调用！

2.5 全局Mixin

上面的mixin，都需要我们在组件中通过mixins参数进行定义，但是我们可以通过Vue的全局配置，让所有的组件都有mixins

// 定义方法：在main.js引入mixin并使用Vue.mixin()
import Vue from 'vue'
import App from './App.vue'
import {mixin,mixin2} from "@/mixins";

Vue.mixin(mixin) // 全局配置mixin,注意这里的方法不带s
Vue.mixin(mixin2)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

此时该项目所有的Vue组件，都有了mixin和mixin2混入