Vuejs - 如何从另一个 Js 文件调用 main.js 的挂载函数答案

【问题标题】：Vuejs - How to call the mounted function of main.js from another Js fileVuejs - 如何从另一个 Js 文件调用 main.js 的挂载函数
【发布时间】：2018-05-07 09:11:06
【问题描述】：

这是我在 commonValidation.js 中给出的代码。

commonValidation.js：

this.$validator.localize('en', {
      messages: {
        required: (field) => '* ' + field + ' is required'
      },
      attributes: {
        email: 'Email'
      } 
    })

我想在挂载函数中调用 main.js 中的上述文件如下所示。但它不起作用。如果我在 mount()(in main.js) 方法中给出了这些验证（来自 commonValidation.js），它就可以工作了。

main.js：

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import App from './App'
import router from './router'
import VeeValidate from 'vee-validate';
import commonValidation from './commonValidation'

Vue.use(VeeValidate);
Vue.use(BootstrapVue);

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {
    App
  },
  mounted()
  {
    commonValidation
  }
})

请帮我在 main.js 中的 mounted() 中调用 commonValidation.Js。提前致谢。

这是我完整的 commonValidation.js

export default {
  mounted() {
    this.$validator.localize('en', {
      messages: {
        required: (field) => '* ' + field + ' is required'
      },
      attributes: {
        email: 'Email'
      } 
    })
  }
}

【问题讨论】：

你能显示完整的 commonValidation.js:file 吗？
这是我完整的 commonValidation.js 文件： export default { mount() { this.$validator.localize('en', { messages: { required: (field) => '* ' +字段+'是必需的'}，属性：{电子邮件：'电子邮件'}}）}}

标签： vue.js vuejs2 vee-validate

【解决方案1】：

您正在commonValidation.js 文件中导出一个对象。对象不能像函数一样被调用。

我认为您的意图是使用mixin。 mixin 只不过是一个包含可重用组件选项作为其属性的对象。

所以只需在你的 main.js 文件的根组件上注册 mixin：

//main.js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import App from './App'
import router from './router'
import VeeValidate from 'vee-validate';
import commonValidation from './commonValidation'

Vue.use(VeeValidate);
Vue.use(BootstrapVue);

new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: {
        App
    },
    mixins : [commonValidation]
}

【讨论】：