Question

我有一个外部模块如下：

const externalModule = {
  thisMethodWantToUseInMarkup: () =>{
   alert("success");
  }
}
export default externalModule

我想从组件标记访问thisMethodWantToUseInMarkup（从以下代码中的按钮A开始）。

<template lang="html">
  <div class="bg-white">
   <button @click="externalModule.thisMethodWantToUseInMarkup()">Button A</button> <!-- is it possible like this directly -->
  </div>
</template>

这样做的最佳做法是什么？

注意： - 我不想在每个组件中导入全局模块。

Answer 1

在视图组件的import部分中使用简单的script（如果您使用默认的.vue文件），或在您的javascript文件中使用。类似于：

<template lang="html">
  <div class="bg-white">
   <button @click="customMethod"> <!-- call your internal method -->
     Button A
   </button> <!-- is it possible like this directly -->
  </div>
</template>

<script>
  import { externalModule } from './externalModule'

   export default {
     name: 'mainComponent',
     methods: {
       customMethod() {
         externalModule.thisMethodWantToUseInMarkup()
       }
     }
   }
 </script>

使用内部方法，您不会将用户交互与特定实现绑定，因此切换文件/逻辑只是意味着更改导入文件。这对于测试目的很有用，例如，您可以根据环境动态加载特定文件。

如何在组件标记中访问其他模块方法（在VueJs之外）？

1 个答案: