当前位置：首页 > news >正文

Vue混入（Vue.mixin）

news 来源：原创 2024/11/20 4:03:59

一、什么是混入

混入 (mixin) ：是一种分发Vue组件中可复用功能的非常灵活的一种方式。混入对象（mixins）是一个js对象，它可以包含我们组件中script项中的任意功能选项，如data、components、created、methods 、computed、watch等等。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
混入其实就是实现了单一继承和多重继承。

二、局部混入

局部混入就是在单独的vue组件中引入了mixin混入对象。
在项目里新建一个混入文件loadingMixin.js:

// loadingMixin.js
export default {
  data() {
    return {
      showLoading: false,
    };
  },
  methods: {
    showLoadingFun() {
      this.showLoading = true;
    },
    hideLoadingFun() {
      this.showLoading = false;
    },
  },
};

在组件中混入此类：

<template>
  <div>
    <h1>loadingData</h1>
    <p v-if="showLoading">loading...</p>
    <p v-if="!showLoading">loaded</p>
  </div>
</template>
<script>
import mixin from "../mixin/loadingMixin";
export default {
  mixins: [mixin],
  data() {
    return {
      list: [],
      form: {},
    };
  },
  mounted() {
    // 调用混入显示loading的方法
    this.showLoadingFun();
    // // 调用混入隐藏loading的方法
    this.getList(this.form).then(() => {
      this.hideLoadingFun();
    });
  },
  methods: {
    getList(form) {
      //此方法用来整理查询条件，并调用查询方法
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve();
        }, 5000)
      })
    },
  },
};
</script>

三、全局混入

全局混入我们只需要把loadingMixin.js引入到main.js中，然后将mixin放入到Vue.mixin()方法中即可；

import Vue from 'vue';
import App from './App.vue';
import mixin from "./mixin/loadingMixin";

Vue.config.productionTip = false
Vue.mixin(mixin)

new Vue({
  el: '#app',
  render: h => h(App)
});

全局混入更为便捷，我们将不用在子组件声明，全局混入将会影响每一个组件的实例，使用的时候需要小心谨慎；这样全局混入之后，我们可以直接在组件中通过this.变量/方法来调用mixin混入对象的变量/方法。

四、混入的特性

mixin可以定义公用的变量或方法，但是mixin中的数据是不共享的，也就是每个组件中的mixin实例都是不一样的，都是单独存在的个体，不存在相互影响的；
mixin混入对象值为函数（例如：beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed）的同名函数选项将会进行递归合并为数组，两个函数都会执行，只不过先执行mixin中的同名函数；
mixin混入对象值为对象（例如：props,data,methods,components）的同名对象将会进行替换，都优先执行组件内的同名对象，也就是组件内的同名对象将mixin混入对象的同名对象进行覆盖；

可用下面样例进行验证：

// loadingMixin.js
export default {
  props: {
    id: {
      type: String,
      default: "loadingMixinId",
    },
  },
  data() {
    return {
      data1: 1,
    };
  },
  methods: {
    method1() {
      console.log("loadingMixin");
      console.log(this.data1);
      console.log(this.id);
    },
  },
  beforeCreate() {
    console.log("loadingMixin beforeCreate 实例刚刚被创建1");
  },
  created() {
    console.log("loadingMixin created 实例已经创建完成2");
  },
  beforeMount() {
    console.log("loadingMixin beforeMount 模板编译之前3");
  },
  /*请求数据，操作dom , 放在这个里面  mounted*/
  mounted() {
    console.log("loadingMixin mounted 模板编译完成4");
  },
  beforeUpdate() {
    console.log("loadingMixin beforeUpdate 数据更新之前");
  },
  updated() {
    console.log("loadingMixin updated 数据更新完毕");
  },
  /*页面销毁的时候要保存一些数据，就可以监听这个销毁的生命周期函数*/
  beforeDestroy() {
    console.log("loadingMixin beforeDestroy 实例销毁之前");
  },
  destroyed() {
    console.log("loadingMixin destroyed 实例销毁完成");
  },
};

// HelloWorldId.vue
<template>
  <div>
    <p @click="method1">Click</p>
  </div>
</template>
<script>
import mixin from "../mixin/loadingMixin";
export default {
  mixins: [mixin],
  props: {
    id: {
      type: String,
      default: 'HelloWorldId'
    }
  },
  data() {
    return {
      data1: 2,
    };
  },
  methods: {
    method1() {
      console.log('HelloWorld');
      console.log(this.data1);
      console.log(this.id);
    }
  },
  beforeCreate() {
    console.log("HelloWorld beforeCreate 实例刚刚被创建1");
  },
  created() {
    console.log("HelloWorld created 实例已经创建完成2");
  },
  beforeMount() {
    console.log("HelloWorld beforeMount 模板编译之前3");
  },
  /*请求数据，操作dom , 放在这个里面  mounted*/
  mounted() {
    console.log("HelloWorld mounted 模板编译完成4");
  },
  beforeUpdate() {
    console.log("HelloWorld beforeUpdate 数据更新之前");
  },
  updated() {
    console.log("HelloWorld updated 数据更新完毕");
  },
  /*页面销毁的时候要保存一些数据，就可以监听这个销毁的生命周期函数*/
  beforeDestroy() {
    console.log("HelloWorld beforeDestroy 实例销毁之前");
  },
  destroyed() {
    console.log("HelloWorld destroyed 实例销毁完成");
  },
};
</script>