VueJS访问vue组件中的外部导入方法

Question

我有一个外部 Java 脚本文件something.js

function myFun(){
  document.getElementById("demo").innerHTML="Hello World!";
  }

export default myFun;

这是我的 vue 组件Dashboard.vue

<template>
    <div>
        <button type="button" name="button" @click="">Call External JS</button>
        <div id="demo"></div>
    </div>
</template>

<script>
import something from "./something.js"
export default {

created(){
}
}
</script>

我有两个问题。

1. 首先我如何在创建的生命周期钩子中调用这个方法来自动运行。
2. 其次，如何通过点击“调用外部 JS”按钮来调用此方法

因为我知道改变 div 的内容可以很容易地通过 vueJS 完成，而无需纯 JS 外部文件的帮助。 但是我问这个问题是为了澄清如何在 vue 组件中使用外部 JS 文件的概念。

谢谢你。

Answer 1

更好的解决方案是使用 mixins：

import something from './something.js'
export default {
  mixins: [something]
}

现在你可以使用任何方法/计算机已导出在something.js ，直接在this 。

因此，在您的示例中，您从something.js导出something.js myFun() ，我们可以从Dashboard.vue调用它，如下所示：

<template>
    <div>
        <button type="button" name="button" @click="myFun">Call External JS</button>
        <div id="demo"></div>
    </div>
</template>

<script>
    import something from "./something.js"
    export default {
        mixins: [something],
        mounted(){
            this.myFun()
        }
    }
</script>

我希望我的语法正确，但这通常是 mixin 的想法。

Answer 2

1. 您可以在您想要的任何生命周期方法下调用导入的something函数。 在这里，我建议使用mounted方法。 一旦组件的所有 HTML 都已呈现，就会触发。

2. 可以在vue组件的方法下添加something函数，然后直接从模板调用该函数。

<template>
    <div>
        <button type="button" name="button" @click="something">
            Call External JS
        </button>
        <div id="demo"></div>
    </div>
</template>

<script>
import something from "./something.js"

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

Answer 3

另一种方法是在数据块中添加方法：

import something from "./something.js" // assuming something is a function

data() {
  return {
    // some data...
    something,
  }
}

然后在您的模板中使用它，例如：

<template>
    <div class="btn btn-primary" @click="something">Do something</div>
</template>

Answer 4

使用您的示例，外部 javascript 文件something.js

function myFun(){
   document.getElementById("demo").innerHTML="Hello World!";
}

export default myFun;

您可以在方法中像对象一样解析它：{} in Dashboard.vue

<template>
    <div>
        <button type="button" name="button" @click="something">Call External JS</button>
        <div id="demo"></div>
    </div>
</template>

<script>
import something from "./something.js"
export default {

   methods: {
      something,
   }
}
</script>

Answer 5

响应式或与组件（不是 API 的）耦合的方法应该写在methods 。我遵循这种做法。 我在这里有一个场景来澄清你的概念：

JS 文件（一个包含函数）文件名 - apis.js

export function GetApiCall(apiName, data, header) {
 return new Promise((resolve, reject) => {
    //do something here
  });
 }

我在created钩子中使用了这个函数。 事情是您可以使用它作为用户定义的方法之一。

Vue 文件（我们将从 js 文件中使用该函数的文件） - 文件名 - infoform.vue

 import { GetApiCall } from '../utils/apisget';
  export default{
    created(){
        // Invoked API to get Data of organization
        GetApiCall(URL,{},{
                "Content-Type": "application/json",
                "Authorization": 'Bearer ' + token
            })
            .then(responseJson => {
            })
            .catch(err=>{
                this.$toasted.show(err);
                // console.log('error==',err);
            });
    },
  methods: {
     onClickMethod () {
       GetApiCall(URL,{},{});
     }
  }
}

Answer 6

我创建了"/helpers/modalHelpermodalHelper.js".

export default function modalHelper() {
   function showModalWithoutBackdrop(modalID) {
      $('#' + modalID).modal({
         backdrop: 'static',
         keyboard: false
      });
   }

   function showModal(modalID) {
      $('#' + modalID).modal("show");
   }

   function hideModal(modalID) {
      $('#' + modalID).modal("hide");
   }

   return {
      showModalWithoutBackdrop,
      showModal,
      hideModal,
   }
}

用法：在vue组件脚本部分：

<script>
    
    import modalHelper from "@/helpers/modalHelpermodalHelper.js"
    
    const {showModal} = modalHelper();
    
    export default {
      methods: {
          showModal,
      }
    }
<script>

现在我可以在模板中使用这个方法了。

Answer 7

这是在模板中使用此 function 的最佳方式，无需创建新的单独方法来调用它们。

import { sumTwoNumbers, multiplyTwoNumbers }  from ‘../utils’; 

export default {
  methods: {
    // Add them here like this and they will be accessible in the template.
    sumTwoNumbers,
    multiplyTwoNumbers,
  }
}