Vue混入(Vue.mixin)

一、什么是混入

混入 (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>loadingDatah1>
    <p v-if="showLoading">loading...p>
    <p v-if="!showLoading">loadedp>
  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">Clickp>
  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>

参考

  • 理解Vue.mixin,利用Vue.mixin正确的偷懒
  • vue的混入(mixins)
  • vue 混入

你可能感兴趣的:(vue.js,前端)