Vue-混入(mixin)使用及注意事项

最新推荐文章于 2023-08-25 14:07:04 发布

栀蒽coding_

最新推荐文章于 2023-08-25 14:07:04 发布

阅读量3.1k

点赞数 6

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/zengdaping/article/details/123554289

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue混入(mixin)的使用，包括基本用法、多组件共享、冲突处理，并对比了混入与Vuex、公共组件的区别。示例代码展示了如何在组件中引入和使用混入对象，以及混入对象在不同组件间的独立性。

摘要由CSDN通过智能技术生成

这篇文章主要介绍了Vue混入(mixin)的使用方法和注意事项，通过示例代码介绍做详细说明。

提示：以下是本篇文章正文内容，下面案例可供参考

一、什么是混入？

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

分为局部混入和全局混入，一般是局部混入，全局混入注册后，在任意组件都可以使用，谨慎使用全局混入对象，因为会影响到每个单独创建的 Vue 实例 (包括第三方模板)。

二、使用场景

多个组件都会使用到的数据和方法，可以使用mixin，通过mixin文件里面定义好属性和方法，组件调用的时候会产生属性和方法的合并，共同使用。其中mixin中的钩子会优先执

三、使用步骤

1.基本使用

mixin相关文件
在这里插入图片描述
mixin-test.js

const mixinTest = {
  data() {
    return {
      msg: "这是mixin混入字段",
      countNum: 1,
    };
  },
  mounted() {
    console.log("mounted1---mixins");
  },
  methods: {
    mixinMethod() {
      console.log(this.msg + "，这是mixin混入的方法");
    },
    addCount() {
      this.countNum = +2;
      console.log("mixin方法addCount this.countNum", this.countNum);
    },
    addCountTwo() {
      return (this.countNum = +2);
    },
  },
};

export default mixinTest;

MixinPageA.vue

<template>
  <div>
    <p>这是MixinOne提示--->{{ hint }}</p>
    <p>这是引入mixin中msg--->{{ msg }}</p>
    <p>这是引入mixin中countNum--->{{ countNum }}</p>
    <p>
      <input
        class="mixin-button"
        type="button"
        value="A页面改变mixin值"
        @click="changeCount"
      />
    </p>
  </div>
</template>

<script>
//引入相关js
import mixinTest from "../mixin-test";
export default {
  name: "MixinOne",
  //引入
  mixins: [mixinTest],
  props: [""],
  data() {
    return {
      hint: "这是第 [ 一ONE ] 个混入文件",
    };
  },
  created() {
  	//可以直接使用mixin里面定义变量
    console.log("create--one", this.msg);
    // 在pageA直接调用mixins里面自增方法, 只会影响pageA里面的值 和PageB页面无关
    this.addCount();
  },
  mounted() {
    console.log("mounted--one", this.msg);
  },

  methods: {
    changeCount() {
      // this.addCount();
      console.log("one-changeCount", this.countNum);
    },
  },
  updated: {},
  beforeDestroy: {},
  destroyed: {},
};
</script>
<style lang="scss" scoped>
.mixin-button {
  border: none;
  background: #3c94e8;
  color: #fff;
  font-size: 14px;
  padding: 5px 10px;
  margin: 10px 0;
}
</style>

2.多组件同时使用

方法和参数在各组件中不共享，虽然组件调用了mixins并将其属性合并到自身组件中来了，但是其属性只会被当前组件所识别并不会被共享，也就是其他组件无法从当前组件中获取到mixins中的数据和方法。

mixin-main.vue里面引入组件A和组件B，组件A和组件B里面分别同时使用混入mixin，其中组件A对mixin里面字段值进行改变

mixin-main.vue

<template>
  <div>
    MiminMain
    <el-row :gutter="20">
      <el-col :span="12"><mixin-one></mixin-one></el-col>
      <el-col :span="12"><mixin-two></mixin-two></el-col>
    </el-row>
  </div>
</template>

<script>
import MixinOne from "./components/MixinPageA.vue";
import MixinTwo from "./components/MixinPageB.vue";
export default {
  name: "MiminMain",
  components: {
    MixinOne,
    MixinTwo,
  },
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
};
</script>

<style scoped></style>

MixinPageB.vue

<template>
  <div>
    <p>这是MixinTWO提示--->{{ hint }}</p>
    <p>这是引入mixin中msg--->{{ msg }}</p>
    <p>这是引入mixin中countNum--->{{ countNum }}</p>
    <p>
      <input
        class="mixin-button"
        type="button"
        value="B页面改变mixin值"
        @click="changeCount"
      />
    </p>
  </div>
</template>

<script>
import mixinTest from "../mixin-test";
export default {
  name: "MixinTwo",
  mixins: [mixinTest],
  props: [""],
  data() {
    return {
      hint: "这是第 [ 一TWO ] 个混入文件",
    };
  },
  created() {
    console.log("create--two", this.msg);
    // this.addCount();
  },
  mounted() {
    console.log("mounted--two", this.msg);
  },

  methods: {
    changeCount() {
      // this.addCount();
      console.log("two-changeCount", this.countNum);
    },
  },
  updated: {},
  beforeDestroy: {},
  destroyed: {},
};
</script>
<style lang="scss" scoped>
.mixin-button {
  border: none;
  background: #3c94e8;
  color: #fff;
  font-size: 14px;
  padding: 5px 10px;
  margin: 10px 0;
}
</style>