Vuelidate，我可以通过 mixin 继承自定义方法吗？答案

【问题标题】：Vuelidate, can I inherit a custom method via mixin?Vuelidate，我可以通过 mixin 继承自定义方法吗？
【发布时间】：2019-06-10 13:33:02
【问题描述】：

使用 Veulidate，在使用 Vue CLI 构建的项目上使用 VueJS 2，我只是尝试使用自定义方法来验证电话号码。该方法来自位于 main.js 中的全局 mixin。

main.js

Vue.mixin({
  methods: {
    vd_phone(val) {
      var phonePattern = /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/;
      return phonePattern.test(val) ? true : false
  }
});

form.vue

validations: {
  phone: {
    required,
    phone: this.vd_phone
  }
}

看起来很简单，对吧？一遍又一遍，我得到Cannot read property of 'vd_phone' of undefined。试过vd_phone、this.vd_phone、this.vd_phone()等。

还尝试将方法放入全局方法选项（而不是 mixin）并尝试通过 $root 访问它，如下所示：

main.js

var vm = new Vue({
  router, el: '#app', store,
  methods: {
    vd_phone() {
      var phonePattern = /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/;
      return phonePattern.test(val) ? true : false;
    }
  },
  render: h => h(App)
});

同样的问题！在我的 form.vue 文件中，我尝试使用 this.$root.vd_phone、$root.vd_phone 等访问此方法。没有骰子。

这是我在该主题上找到的所有内容：https://github.com/vuelidate/vuelidate/issues/308，但这似乎是在谈论继承整个验证器属性 - 而不仅仅是一个方法。

感谢任何帮助。

【问题讨论】：

标签： validation vue.js vuelidate

【解决方案1】：

您正在使用工厂模式从它的源中实例化一个函数，以便在其他文件中使用。为此，您必须从源文件中导出，以便其他文件可以导入它，如下所示：

main.js

export default {
      vd_phone(val) {
         var phonePattern = /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/;
         return phonePattern.test(val) ? true : false;
   }
}

然后将文件导入您需要该功能的任何地方，您就可以访问它。

【讨论】：