mixin混入主要用于js代码复用
组件主要用于功能复用
混入就是把组件多次使用的属性和方法等内容进行封装

一、混入的使用

2.1、新建myMixin.js

2.2、myMixin.js代码

export default {
  methods: {
    fun() {
      console.log("你好！！！！！！");
    },
  },
  data() {
    return {
      text: "混入测试",
    };
  },
  computed: {},
};

2.3、全局注入main.js

慎用可能会造成代码的污染

// 1.引用mixin
import myMixin from "./mixin/myMixin.js"
// 2.配置全局混入
Vue.mixin(myMixin)

2.4、局部混入 --mixins

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <!-- 3.就可以直接想怎么用就怎么用混入的内容 -->
    <button @click="fun()">点我调用混入的方法--{{ text }}</button>
  </div>
</template>
<script>
// 1.引用混入
import myMixin from "./mixin/myMixin.js";
export default {
  // 2.调用混入
  mixins: [myMixin],
};
</script>