Vue – mixin 混合的应用

简介

mixin 是用于对多个组件重复调用某一些数据而设的，当两个或以上组件，都需要同时使用一样的代码时，可以把这些代码提取出来放到一个公共的函数文件中，其它需要使用这些代码的组件只需要引入它就可以实现需要的功能。

mixin 的使用

案例：对比两个Vue组件的代码情况：

export default {
  name: "component1",
  data(){
    return { prop1:"组件一中的数据" }
  },
  mounted() {
    console.log("你好，组件")
  }
}
</script>

export default {
  name: "component2",
  data(){
    return { prop2:"组件二中的数据" }
  },
  mounted() {
    console.log("你好，组件")
  }
}
</script>

从上面两段代码中可以看出，组件一与组件二中有共同的代码，在 mounted 中都有同样的执行代码，此时我们可以把共同代码提取到一个文件中，并使两个组件引入，即可达到原来的效果：

创建一个 mixin.js 文件，用于存放并暴露共用代码
export const mixin = {
    mounted(){
        console.log("你好，组件")
    }
}

组件中若需要用到这些代码时，只需要引用，并设置mixins即可实现。

组件一与组件二使用mixin
<script>
import {mixin} from "@/components/mixin";
export default {
  name: "component1",
  mixins:[mixin]
}
</script>

mixin 的数据补充

mixin 除了可以重复使用代码的功能外，还可以合并数据。

// mixin 文件配置 data 数据
export const mixin = {
    data(){
        return{
            a:1,
            b:2
        }
    }
}

当组件引用 mixin 文件后，组件中的 data 数据，将会与 mixin 中的数据合并。

mixin 的优先级

当组件中的数据与mixin中的数据产生冲突时

data: data 中的数据与 mixin 中的数据产生冲突时，以组件中的数据为准，mixin 中的冲突数据将无效。

methods : methods 中的方法与 mixin 中的方法产生冲突时，以组件中的方法为准，mixin 中的冲突方法将无效。

mounted : 组件中的生命周期函数，与mixin中的生命周期函数产生冲突时，将先执行组件中的生命周期函数，再执行mixin 中的生命周期函数。

mixin 全局混入

Vue 提供全局mixin混入功能，通过全局mixin混入功能，可使全部组件都受到mixin的影响。

import {mixin1, mixin2} from "./mixin.js";
Vue.mixin(mixin1);
Vue.mixin(mixin2)

配置了全局mixin混入后，所有组件都会受mixin影响。