一、使用场景：

有两个非常相似的组件，他们的基本功能是一样的，但他们之间又存在着足够的差异性，

二、用法

1.mixin执行优先级高于页面内。

//mixin
  const hi = {
    mounted() {
      console.log('hello from mixin!')
    }
  }

  //vue instance or component
  new Vue({
    el: '#app',
    mixins: [hi],
    mounted() {
      console.log('hello from Vue instance!')
    }
  });

  //Output in console
  > hello from mixin!
  > hello from Vue instance!

2.mixin的方法与页面内方法冲突时，重新方法

3.mixin引入后，和methods中的方法一样使用。

//mixin
      const hi = {
        methods: {
          sayHello: function() {
            console.log('hello from mixin!')
          }
        },
        mounted() {
          this.sayHello()
        }
      }

      //vue instance or component
      new Vue({
        el: '#app',
        mixins: [hi],
        methods: {
          sayHello: function() {
            console.log('hello from Vue instance!')
          }
        },
        mounted() {
          this.sayHello()
        }
      })

      // Output in console
      > hello from Vue instance!
      > hello from Vue instance!

4.使用场景：埋点系统放在mounted和destroyed的生命周期里面

5.局部的mixin引入使用

partMixin.js

export default {
  methods: {
    // operation 何种操作 productName 产品名称 confirmAction 执行方法
    confirm(operation, productName, confirmAction) {
      return this.$_yh_confirm(`确定要${operation}${productName}?`, '提示', {
        confirmButtonText: operation,
      }).then(confirmAction);
    },
    formatter(row, col, value) {
      const needTransform = [
        'originBuyMoney',
        'perBuyMaxMoney',
        'onePerBuyMaxMoney',
        'saleAmt',
        'remainAmounts',
        'incrementalAmount',
      ];
      if (needTransform.includes(col.property)) {
        return this.getAlignRight(this.formatCurrency(value));
      }
      const needDateTransform = ['subStartDay', 'subEndDay'];
      if (needDateTransform.includes(col.property)) {
        return this.formatDate(value);
      }
      switch (col.property) {
        case 'prdCode':
          return this.getProductCodeText(value, row);
        case 'isTop':
          return this.getStickText(value);
        case 'isSale':
          return this.getSaleText(value);
        case 'saleStatus':
          return this.getProductStatusText(value);
        case 'termLimit':
          return `${value}个月`;
        case 'annualInsrate':
          return `${this.formatRate(value)}%`;
        default:
          return value || '-';
      }
    },
    // 根据当前状态，计算可执行的操作
    computeStickText(v) {
      return v !== '1' ? '置顶' : '取消置顶';
    },
    computeSaleText(v) {
      return v !== '1' ? '上架' : '下架';
    },
    computeSaleClass(v) {
      return v !== '1' ? 'button--green' : 'button--red';
    },
    getStickText(v) {
      if (v === '1') {
        return <span class="button--green">是</span>;
      }
      return <span>否</span>;
    },
    getSaleText(v) {
      return v === '1' ? '上架' : '下架';
    },
    getProductStatusText(v) {
      const map = { 1: '在售', 2: '停售', 3: '售罄' };
      if (v > 1) {
        return <span style="color: #999">{map[v]}</span>;
      }
      // 若银行无“产品状态”数据，默认为“在售”
      return map[v] || '在售';
    },
    getAlignRight(v) {
      return <div style="text-align: right;">{v}</div>;
    },
    getProductCodeText(v, row) {
      if (!v) {
        return '-';
      }
      return (
        <span class="button--blue" onClick={row}>
          {v}
        </span>
      );
    },
    // 更改上下架状态
    updateSaleStatus(data, cb, error) {
      this.$_post(this.$API.updateCDSSale, this.toggleStatus(data.isSale, data.id))
        .then(cb)
        .catch(error);
    },
    // 更改置顶状态
    updateStickStatus(data, cb, error) {
      this.$_post(this.$API.updateCDSTop, this.toggleStatus(data.isTop, data.id))
        .then(cb)
        .catch(error);
    },
    // 根据当前状态，计算修改状态
    toggleStatus(currentStatus, id) {
      const statusMap = {
        1: '2',
        2: '1',
      };
      return {
        data: {
          id,
          isTop: statusMap[currentStatus],
          isSale: statusMap[currentStatus],
          updateUserid: this.userId,
        },
      };
    },
    updateSuccess(res) {
      if (res.errorCode === this.$CODE.success) {
        this.$message.success(this.$MSG.M0108);
        this.listCDS();
      } else {
        this.$message.warning(res.errorMsg);
      }
    },
    error() {
      this.$message.error('操作失败');
    },
  },
};

user.vue

    import partMixin from './partMixin'
    export default {
      name: 'use',
      mixins:[partMixin],
    }

5.全局的mixin引入使用

（1）创建一个mixins文件夹

（2）建立单个的mixin1.js、mixin2.js

（3）在文件夹内建立一个index.js

src/mixins/index.js

// 非全局 mixin，按需引用
export pageCount from './page-count';
export clearBy from './clear-by';
export getFunctionList from './get-function-list';
export pickBy from './pick-by';
export addNav from './add-nav';
export getPagingData from './get-paging-data';
export removeTab from './remove-tab';

user.vue

    import { pageCount,clearBy  } from './mixins/toggle'
    export default {
      name: 'usegloble',
      mixins: [pageCount,clearBy  ],

    }