mixin 混入的使用与理解

代码：

 首页先引入A 和 B 组件

<template>
  <div>
    <DomeA></DomeA>
    <hr />
    <DomeB></DomeB>

    <hr />
    <button @click="commonMethod()">commonMethod</button>
  </div>
</template>

<script>
import DomeA from "@/views/A-assembly.vue";
import DomeB from "@/views/B-assembly.vue";
// 引入 mixin 公共组件
import mixin from "@/components/11/mixin.js";

export default {
  // 混入
  mixins: [mixin],
  data() {
    return {};
  },
  // 注册组件
  components: { DomeA, DomeB },
  // 这里是注册了一个与公共组件中事件相同的名字
  // 如果当当前文件中要是有与公共组件事件相同的事件
  // 则以当前页面文件中的事件优先使用
  // A 和 B 组件则还是以公共组件 mixin 事件为准
  methods: {
    commonMethod() {
      console.log("公共数据");
    },
  },
};
</script>

<style>
</style><template>
  <div>
    <DomeA></DomeA>
    <hr />
    <DomeB></DomeB>
  </div>
</template>

<script>
import DomeA from "@/views/A-assembly.vue";
import DomeB from "@/views/B-assembly.vue";

export default {
  data() {
    return {};
  },
  components: { DomeA, DomeB },
};
</script>

 A组件内容

<template>
  <div>
    <p>{{ aData }}</p>
    <p>{{ commonData }}</p>
    <button @click="aMethod()">aMethod</button>
    <!-- 调用公共组件中的事件 -->
    <button @click="commonMethod()">commonMethod</button>
  </div>
</template>

<script>
// 引入公共组件文件
import mixin from "@/components/11/mixin.js";

export default {
  // 混入
  mixins: [mixin],
  data() {
    return {
      // 当前文件独有数据
      aData: "A组件数据",
    };
  },
  methods: {
    // 当前文件独有的事件
    aMethod() {
      console.log("组件A的方法");
    },
  },
  // 当前文件独有
  mounted() {
    console.log("组件a mounted");
  },
};
</script>
<style>
</style>

B组件中的内容

<template>
  <div>
    <div>
      <p>{{ bData }}</p>
      <p>{{ commonData }}</p>
      <button @click="bMethod()">aMethod</button>
      <!-- 调用公共组件中事件 如过有参数则在此传参即可 -->
      <button @click="commonMethod(bData)">commonMethod</button>
    </div>
  </div>
</template>

<script>
import mixin from "@/components/11/mixin.js";

export default {
  mixins: [mixin],
  data() {
    return {
      bData: "B组件数据",
    };
  },
  methods: {
    bMethod() {
      console.log("组件B的方法");
    },
  },
  mounted() {
    console.log("组件b mounted");
  },
};
</script>

<style>
</style>

公共组件内容

export default {
  data() {
    return {
      commonData: "公共数据",
    }
  },
  methods: {
    commonMethod(a) {
      console.log("公共的方法", a);
    },
  },
  mounted() {
    console.log("公共输出");
  }
}

mixin 混入的优势

  1、后期容易优化和维护

  2、可扩展性高

  3、代码去重 相同的东西可以直接调用