javascript - Vue.js:导入带有函数的类并在子组件中调用它

Question

我有一个组件 my-parent。在这个组件中，我使用了一个子组件 my-child 并导入了一个具有自己的函数 exportedFunction 的外部类 MyClass。我尝试使用此解决方案:VueJS accessing externaly imported method in vue component

基本上，我使用mounted 和导入类中的函数名称。在 methods 中，我定义了一个新方法，它从导入的类中调用已安装的方法。然后我将创建的方法作为属性传递给我的 child ，在那里我尝试使用 @click 调用函数并在那里传递参数。

到目前为止，这是我的代码:

my-parent 模板:

<template>
    <my-child :exportedFunction="callFunction"></my-child>
</template>

<script>
import MyClass from './MyClass';

export default {
    mounted() {
        exportedFunction()
    },
    methods: {
        callFunction() {
            exportedFunction()
        }
    }
}
</script>

my-child 模板:

<template>
    <button @click="exportedFunction('hello world!')">Click me!</button>
</template>

<script>
export default {
    props: ['exportedFunction']
}
</script>

MyClass代码:

export default class MyClass {
    exportedClass(parameter) {
        console.log(parameter) // expected 'hello world' from child
    }
}

希望得到一些帮助!

Answer 1

我会放弃你的 MyClass 组件，取而代之的是:

我的 parent

<template>
    <my-child :triggerEvent="callFunction"></my-child>
</template>

<script>
export default {
    methods: {
        callFunction() {
          console.log('hello');
        }
    }
}
</script>

我的 child

<template>
    <button @click="$emit('triggerEvent')">Click me!</button>
</template>

因为你想在你的例子中使用 MyClass 你可以保持原样并将 my-parent 作为:

<template>
  <my-child :triggerEvent="callFunction"/>
</template>

<script>
import MyChild from "./MyChild";
import MyClass from "./MyClass.js";

export default {
  components: {
    MyChild
  },
  data() {
    return {
      myCls: new MyClass()
    };
  },
  mounted() {
    this.myCls.exportedClass("hello my class");
  },
  methods: {
    callFunction() {
      console.log("hello");
    }
  }
};
</script>