Multiple file Vue js setup -- [Vue warn]: Error in v-on handler: "TypeError: formSubmitMessage is not a function"

Question

我正在使用 javascript。我使用 Vue 和传统 html 编写了一个反应式单页应用程序，我想将它移植到 vue cli。我有几个js文件。其中有一个我想使用 Vue 单文件组件调用的函数。其中一个 js 文件称为 'controls.js'。一个叫做 'v.js'。 v.js 文件有一个 vue 实例。我想从 v.js 文件中运行 control.js 中的一个函数。

//error msg
[Vue warn]: Error in v-on handler: "TypeError: formSubmitMessage is not a function"

found in

---> <Message> at src/components/Message.vue
       <Appx> at src/App.vue
         <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6917
vue.runtime.esm.js?2b0e:1888 

TypeError: formSubmitMessage is not a function
    at Vue.useFormSubmitMessage (v.js?e9d2:118)
    at VueComponent.useFormSubmitMessage (App.vue?234e:202)
    at click (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"9216e95a-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Message.vue?vue&type=template&id=61d2d687& (app.js:1082), <anonymous>:33:42)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179)
    at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?2b0e:6917)
logError @ vue.runtime.esm.js?2b0e:1888
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6917

// v.js
import Vue from "vue";
import appx from "../App.vue";

require("./populate.js");
const   {formSubmitMessage, preview_image_msg} = require ('./populate.js');

export function doLoad() {

  let visibility = new Vue({
    el: '#app',
    render: h => h(appx),
    data() {
      return {
        login: false,
        register: false,
        newsfeed: false,
        home: true,
        banner: true,
        form_message: false,
        form_exercise: false,
        form_workout: false
      };
    },
    mounted() {
      console.log("mounted");
    
    },
    methods: {
      classOption: function (i) {
        
        const x = Boolean(i);
        if (x === true) return 'visi';
        else return 'invis';
      },
      // this is only part of list of functions.
      useFormSubmitMessage: function () { 
        formSubmitMessage();  //<<-- this does not work.
        
      }


    }
  });

}

//main.js
import Vue from "vue";

import './../node_modules/bulma/css/bulma.css';
import "./../node_modules/@fortawesome/fontawesome-free/js/all.js"
import '@/assets/bulma.css';


require("./js/v.js");

import { doLoad } from "./js/v.js";

doLoad();

//App.vue
<template>
  <div id="appx">
     <message
      :newsfeed="newsfeed"
      :banner="banner"
      :login="login"
      :register="register"
      :home="home"
      :form_message="form_message"
      :form_exercise="form_exercise" 
      :form_workout="form_workout"
      :focusRegister="focusRegister"
      :focusNews="focusNews"
      :focusReset="focusReset"
      :focusLogin="focusLogin"
      :focusFormMessage="focusFormMessage"
      :useFormSubmitMessage="useFormSubmitMessage"

    ></message>
  </div>
</template>

<script>
import "./../node_modules/bulma/css/bulma.css";
import "@/assets/bulma.css";

import bannercomponent from "./components/Banner.vue";
import feedcontainer from "./components/FeedContainer.vue";
import register from "./components/Register.vue";
import home from "./components/Home.vue";
import login from "./components/Login.vue";
import message from "./components/Message.vue";

import { visibility, newsfeed, banner } from "./js/v.js";
const   {formSubmitMessage} = require ('./js/populate.js');


export default {
  name: "appx",
  data() {
    return {

      login: this.$root.login,
      register: this.$root.register,
      home: this.$root.home,
      form_message: this.$root.form_message,
      form_exercise: this.$root.form_exercise,
      form_workout: this.$root.form_workout,
      newsfeed: this.$root.newsfeed,
      banner: this.$root.banner,
    };
  },
  components: {
    bannercomponent: bannercomponent,
    feedcontainer: feedcontainer,
    register: register,
    home: home,
    login: login,
    message: message
  },

  mounted() {
    console.log("appx");
    
  },
  methods: {
    classOption: function (i) {

      const x = Boolean(i);
      if (x === true) return "visi";
      else return "invis";
    },
    copyVals: function() {
      this.login = this.$root.login;
      this.register = this.$root.register;
      this.home = this.$root.home;
      this.form_message = this.$root.form_message;
      this.form_exercise = this.$root.form_exercise;
      this.form_workout = this.$root.form_workout;
      this.newsfeed = this.$root.newsfeed;
      this.banner = this.$root.banner;
    },
    
    useFormSubmitMessage: function () {
      this.$root.useFormSubmitMessage();
      this.copyVals();
    }
  },
}; 

</script>


// controls.js
import Vue from "vue";

require("./v.js");

import { subtreeStr, setMessage, insertFeed, setExercise } from './populate.js';
import { focusNews } from "./v.js";


export function formSubmitMessage() {
  console.log("here 1");
  
  //do some things here that are not listed.
}

//Message.vue
<template>
  
    <!-- start inputform for message -- some listing has been removed -->
    
    <button class="button is-primary" @click="useFormSubmitMessage();">Submit</button>

                    
   <input class="file-input is-primary" type="file" name="resume" id="pic-button" ref="picButton" @change="preview_image_msg($event)" multiple>
                        
</template>

<script>

export default {
  name: "message",
  data: () => ({
    
  }),
  props: {
    newsfeed: Boolean,
    focusFormMessage: Function,
    form_message: Boolean,
    useFormSubmitMessage: Function,

  },
  
};
</script>

我不知道从另一个文件中包含函数的正确方法。

Answer 1

看起来 formSubmitMessage 被定义为 controls.js 中的命名导出，因此使用命名导入：

import { formSubmitMessage } from './controls.js'

您正在混合使用 require 和 import 来加载模块，但最好坚持使用 Vue CLI 中的一个，可能是导入。

Multiple file Vue js setup -- [Vue warn]: Error in v-on handler: "TypeError: formSubmitMessage is not a function"

Multiple file Vue js setup -- [Vue warn]: Error in v-on handler: "TypeError: formSubmitMessage is not a function"

javascript

node.js

vue.js

bulma