vue中使用mixins实现组件方法复用

vue中提供了一种混合机制mixins，用来更高效的实现组件内容的复用。

  组件在引用之后相当于在父组件内开辟了一块单独的空间，
  来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。

 而mixins则是在引入组件之后，则是将组件内部的内容如data等方法、
 method等属性与父组件相应内容进行合并。
 相当于在引入后，父组件的各种属性方法都被扩充了。

 单纯组件引用：
      父组件 + 子组件 >>> 父组件 + 子组件
 mixins：
      父组件 + 子组件 >>> new父组件

在做项目中使用该方法实现一个获取短信验证码倒计时的复用。

具体实现如下：

一，应用

1.首先需要在main.js中配置

Vue.mixin({
    onLoad() {
        const {
            $mp
        } = this.$root
        this._route = parseRoute($mp)
        // this.$VUE_APP_RESOURCES_URL = VUE_APP_RESOURCES_URL;
        this._data.$VUE_APP_RESOURCES_URL = VUE_APP_RESOURCES_URL;
    },
    onShow() {
        _router.app = this
        _router.currentRoute = this._route
    }
})

2，在组件和方法中使用

在components/uni-popup中uni-popup.js中使用

import message from './message.js';
// 定义 type 类型:弹出类型：top/bottom/center
const config = {
    // 顶部弹出
    top:'top',
    // 底部弹出
    bottom:'bottom',
    // 居中弹出
    center:'center',
    // 消息提示
    message:'top',
    // 对话框
    dialog:'center',
    // 分享
    share:'bottom',
}
export default {
    data(){
        return {
            config:config
        }
    },
    mixins: [message],
}

3.在uni-popup组件中使用

mixins: [popup],

4.在多个页面中使用，比如：

绑定手机号
修改密码
找回密码

手机号+验证码登录
手机号+验证码注册

4.1.引入

import sendVerifyCode from "@/mixins/SendVerifyCode";

mixins: [sendVerifyCode],

4.2.在minxins下的SendVerifyCode.js中封装方法

export default {
  data() {
    return {
      disabled: false,
      text: "获取验证码"
    };
  },
  methods: {
    sendCode() {
      if (this.disabled) return;
      this.disabled = true;
      let n = 60*3;
      this.text = "剩余 " + n + "s";
      const run = setInterval(() => {
        n = n - 1;
        if (n < 0) {
          clearInterval(run);
        }
        this.text = "剩余 " + n + "s";
        if (this.text < "剩余 " + 0 + "s") {
          this.disabled = false;
          this.text = "重新获取";
        }
      }, 1000);
    }
  }
};

4.3 .在页面中实际应用

<view class="item">
          <view class="align-left">
            <input type="text" placeholder="填写验证码" class="codeIput" v-model="captcha" />
            <button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''"
              @click="code">{{ text }}</button>
          </view>
 </view>

当点击获取验证码的方法时，然后就会出现那个倒计时的效果