从外部类调用 Vue 组件内部的方法答案

【问题标题】：Calling a method inside Vue component from an outside class从外部类调用 Vue 组件内部的方法
【发布时间】：2019-05-08 01:54:28
【问题描述】：

我是 Vue/JS 的新手，目前正在尝试构建一个应用程序。

我目前有一个组件设置如下（显然还有更多，但希望以下内容对我的问题有所帮助）：

<template>...</template>
<script>
 export default {
  data() {
   return {...}
  },
  methods: {
   method1() {
    const Class1 = new Class1;
   },
   method2() {
    ...
   }
  }
 }
 class Class1 {}
 class Class2 {
  ...want to use above method2() here
 }
</script>
<style>...</style>

现在我可以在 method1() 中使用 Class1，但有什么方法可以轻松地从 Class2 调用 method2()？

非常感谢。

【问题讨论】：

您好 Jeff，只是向您展示了一种不同的方法，在 vue.js 中您可以使用事件总线方法。基本上是一个用于将事件传递给其他组件的组件。在这种情况下它可能非常有用：alligator.io/vuejs/global-event-bus
是的，这正是我想要的——一种从 Vue 来回发送数据的方法。非常感谢！随意发布作为答案，以便我标记为正确。

标签： javascript vue.js

【解决方案1】：

以方法 foo 为例

  export default class Class1 {
    function foo() {};
}

从另一个类调用函数可能是这样的：

import Class1 from './class1';
    <template>...</template>
    <script>
     export default {
      data() {
       return {
        methods: {
         method1() {
          const x = new Class1;
          return x.foo()
         }
        }
       }
      }
     }
    </script>

【讨论】：

【解决方案2】：

发布一个更详细的答案：在 vue.js 中，您可以使用事件总线方法与不相关的组件进行通信。基本上是一个用于将事件传递给其他组件的组件。在这种情况下，它可能非常有用。

事件总线.js：

import Vue from 'vue';
export const EventBus = new Vue();

将发出事件的组件：

<template>
  <div @click="functionToEmitTheEvent()"></div>
</template>

<script>
// Import the EventBus we just created.
import { EventBus } from './event-bus.js';

export default {
  data() {
    return {
      clickCount: 0
    }
  },

  methods: {
    functionToEmitTheEvent() {
      this.clickCount++;
      // Send the event on a channel (customClick) with a payload (the click count.)
      EventBus.$emit('customClick', this.clickCount);
    }
  }
}
</script>

监听事件的脚本：

// Import the EventBus.
import { EventBus } from './event-bus.js';

// Listen for the customClick event and its payload.
EventBus.$on('customClick', clickCount => {
  console.log(`Oh, that's nice. It's gotten ${clickCount} clicks! :)`)
});

所有编写的代码都是从这里复制的：https://alligator.io/vuejs/global-event-bus/

希望对你有帮助！

【讨论】：

【解决方案3】：

在您的组件外部创建Class1 和Class2 作为 ES6 类并导出它们。然后将类导入您的组件。所以是这样的：

1 类

export default class Class1 {
  ...  
  ...
}

2 类

export default class Class2 {
  ...  
  ...
}

然后将这些类导入到你的 Vue 组件中

<template>...</template>
<script>
 import Class1 from './class1';
 import Class2 from './class2';

 export default {
  ...
 data() {
   return {
      // your data
   }
 },
 methods: {
     method1() {
      const Class1 = new Class1();
     },
     method2() {
      const Class2 = new Class2();
      ..
      return 'something';
     },
     method3() {
        // call method 2
        method2();
        ....
     }
  ...
  ....

【讨论】：

感谢您的回答 - 我应该如何从 Class2 调用 method2？
只需导入 class2 并调用课程，就像 Class 1 一样。我编辑了我的答案。此外，您在data() 中调用methods。那是错误的。 methods 必须在 date() 之外。
感谢您指出我在数据内部的方法的错字 - 原始问题已修改。

【解决方案4】：

感谢所有答案 - 认为我最初的问题一定不是很清楚，但我设法找到了解决方案（刚刚偶然发现，昨晚花了几个小时搜索！）这里是为其他想知道的人。

要使用组件外部的方法，请在创建时全局注册 Vue 实例（例如在 main.js 中）：

app = new Vue({
 ...
})
window.App = app;

然后可以通过引用window.App来调用任何方法，例如

App.method2();

完整的工作代码：

<template>...</template>
<script>
 export default {
  data() {
   return {...}
  },
  methods: {
   method1() {
    const Class1 = new Class1;
   },
   method2() {
    ...
   }
  }
 }
 class Class1 {}
 class Class2 {
  App.method2();
 }
</script>
<style>...</style>

【讨论】：