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

Question

使用

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

主.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
  }
});

表单.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访问它：

主.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，但这似乎在谈论继承整个验证器属性 - 而不仅仅是一种方法。

任何帮助，不胜感激。

Answer 1

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

主.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;
   }
}

然后将文件导入到您需要该功能的位置，您将可以访问它。