在Vue组件外部调用Vue组件内的方法

Question

我是一名新手，正在尝试构建一个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

---

你好Jeff，我想向你展示一种不同的方法，在vue.js中你可以使用事件总线(Event Bus)方法。基本上，它是一个组件，用于将事件传递给其他组件。在这种情况下，它非常有用： https://alligator.io/vuejs/global-event-bus/ - Joao Paulo

是的，这正是我在寻找的——一种从Vue中来回发送数据的方式。非常感谢！请随意发布为答案，以便我可以标记为正确。 - Jeff

Answer 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>

- Aziz.G

Answer 2

创建一个ES6类并导出Class1和Class2，将它们放在组件之外。然后在组件中导入这些类。代码示例如下：

Class 1

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

第二课

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

- Christopher Dosin

---

谢谢你的回答 - 我应该如何从Class2调用method2？ - Jeff

只需导入Class2并调用该类，与Class1相同。我编辑了我的答案。此外，您正在data()内部调用methods。那是错误的。methods需要在data()之外。 - Christopher Dosin

感谢您指出我的笔误，方法已经被移动到数据之外 - 原始问题已修改。 - Jeff

Answer 3

感谢大家的回答 - 我想我的原始问题可能没有表达清楚，但我已经找到了解决方案（昨晚花了几个小时搜索后刚刚偶然发现！）这里是解决方案，供其他人参考。

要在组件外部使用方法，请在创建时全局注册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>

- Jeff

Answer 4

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

event-bus.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/ 希望对你有所帮助！

- Joao Paulo