vue之mixin混入

vue之mixin混入

mixin是什么？

官方的解释：
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

感觉有点难以理解，其实简单来说：就是将组件的公共逻辑或者配置提取出来，哪个组件需要用到，直接将提取的这部分混入到组件内部即可，提取的是逻辑或配置，而不是HTML代码和CSS代码。

mixin的特点

mixin中的数据和方法都是独立的，组件之间使用后是互相不影响的。

使用

1.定义mixin.js文件

mixin是一个对象，但是本身也是有生命周期的，可以定义属性和方法等

export const mixins = {
  data() {
    return {
      msg: "我是原本的结果",
    };
  },
  computed: {},
  created() {
    console.log("我是mixin中的created生命周期函数");
  },
  mounted() {
    console.log("我是mixin中的mounted生命周期函数");
  },
  methods: {
    clickMe() {
      console.log("我是mixin中的点击事件");
    },
  },
};

mixin.js中的msg,clickMe在混入其他组件后都可以直接使用。

2.局部混入

index.vue文件

<template>
  <div id="app">
    <button @click="clickMe">点击我</button>
    <button @click="changeMsg">更改mixin数据</button>
	点击更换的数据：{{msg}}
    <demo></demo>
  </div>
</template>

<script>
import { mixins } from "@/mixin/index.js";
import demo from "./demo.vue";
export default {
  name: "App",
  mixins: [mixins],
  components: { demo },
  created() {
    console.log("组件调用minxi数据", this.msg);
  },
  mounted() {
    console.log("我是组件的mounted生命周期函数");
  },
  methods: {
    changeMsg() {
      this.msg = "我是点击后的结果";
      console.log("更改后的msg:", this.msg);
    },
  },
};
</script>

在混入mixin.js同时导入一个混入过的demo.vue组件，来验证一下同一个数据之间是否相互影响。
demo.vue

<template>
  <div>mixin中的数据：{{ msg }}</div>
</template>
<script>
import { mixins } from "@/mixin/index.js";
export default {
  mixins: [mixins],
};
</script>

经过测试发现是不影响的。

3.生命周期的执行顺序：

这是没有带入demo组件时候，生命周期的执行顺序：

导入demo组件后的生命周期：

4.冲突

如果属性名或者方法名冲突的话如何执行呢？四个字总结就是就近原则，组件本身有会覆盖混入的。

5.全局混入

在main.js中导入注册即可

import { mixins } from "@/mixin/index.js";
Vue.mixin(mixins);