vue的mixins

一、基础

提供组件选项的可复用性，比如：data、components、props、created、methods等等。当一个组件引用mixins的时候，所有mixins对象的选项将被“混合”进入组件本身的选项。

简而言之，mixins就是一个对象，我们可以在mixins对象下写入data、component、props、methods、created等等vue实例中script的各个选项，然后将mixins暴露出去，给其他的组件使用，但是这些组件无法修改掉mixins选项中的初始值，各个组件可以拿到这些值进行修改增加等操作，不会影响到其他组件引用的值。

简单使用：

// src文件夹下新建mixins文件夹，在这个文件夹下新建一个xxx.js文件用来存放对象并将其暴露出去
export const myMixins = {
  data() {
    return {
      name: "stefan",
      age: 24
    }
  },
  props: {},
  component: {},
  created() {},
  methods: {}
}


// 在组件中使用import引入后使用
<script>
import { myMixins } from "@/minxins/xxx.js";

export default {
  name: "test",
  mixins: [myMixins],
  data() {
    return {}
  },
  created() {
    console.log(this.name); // stefan
    console.log(this.age); // 24
  }
}
</script>

二、选项合并

当组件和mixins对象含有同名选项的时候，将会以恰当的方式进行合并。

const myMixins = {
  data() {
    return {
      name: "stefan",
      age: 24
    }
  }
}

const app = Vue.createApp({
  mixins: [myMixins],
  data() {
    return {
      name: "thiStefan"
    }
  },
  created() {
    console.log(this.$data); // { name: "thiStefan", age: 24 }
  }
})

当组件和mixins对象含有同名钩子时，将被合并为一个数组，都将被调用。

mixins钩子的调用将先于组件自身的钩子。

const myMixins = {
  created() {
    console.log("mixins's created()");
  }
}

const app = Vue.createApp({
  mixins: [myMixins],
  created() {
    console.log("component's created()");
  }
})

// mixins's created()
// component's created()

当值为对象的选项，例如methods、component、directives，将被合并为一个对象。

两个对象键名冲突时，会取组件对象的键值对。

const myMixins = {
  methods: {
    eat() {
      console.log("mixins's func eat() has been called");
    },
    sleep() {
        console.log("mixins's func sleep() has been called");
    }
  }
}

const app = Vue.createApp({
  mixins: [myMixins],
  methods: {
    say() {
      console.log("component's func say() has been called");
    },
    sleep() {
      console.log("conponent's func sleep() has been called");
    }
  }
})

const vm = app.mount("#mixins-basic");
vm.eat();       // console.log("mixins's func eat() has been called");
vm.sleep();       // console.log("conponent's func sleep() has been called");

如果想了解更多相关资料，请参考官方文档：

https://v3.cn.vuejs.org/guide/mixins.html