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（）？

非常感谢。

Answer 1

在组件外部将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();
        ....
     }
  ...
  ....

Answer 2

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

Answer 3

感谢所有答案-认为我最初的问题可能还不清楚，但我设法找到了解决方案（昨晚花了几个小时搜索后才偶然发现！）在这里，这是其他任何人都想知道的。 / p>

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

app = new Vue({
 ...
})
window.App = 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>

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/

希望对您有帮助！

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

4 个答案: