如何从外部 JavaScript 文件调用 Vue.js 函数？答案

【问题标题】：How do I call a Vue.js function from an external JavaScript file?如何从外部 JavaScript 文件调用 Vue.js 函数？
【发布时间】：2021-05-06 13:32:27
【问题描述】：

我必须从外部 JavaScript 文件调用 Vue.js 函数，但它不起作用。下面我给出了我尝试过的代码。

// external js file 
import vm from './vue.js';

function callingVuejsFunction(data) {  
    this.vm.displayData()
}

// Vuejs file
var vm = new Vue({
    el: '#app',
    data: {
        firstname : '' ,
        lastname  :  ''
    },
    methods:{
        displayData: function( ) {
            alert()
        } 
    } 
})

【问题讨论】：

尝试vm.displayData() 而不是this.vm.displayData()
它没有调用。
您需要引用您的 Vue 应用程序 - 而不是 Vue 框架本身。在您的 Vue 应用程序中更改 main.js，使其将根 Vue 实例分配给一个全局变量（例如 window.myApp），然后在您的外部脚本中引用此变量。

标签： javascript vue.js vuejs2

【解决方案1】：

你可以使用vm.$options.methods.displayData():

var vm = new Vue({
  el: '#app',
  data: {
    firstname: '',
    lastname: ''
  },
  methods: {
    displayData: function(msg) {
      alert(msg)
    }
  }
})

vm.$options.methods.displayData('I was called externally!')

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app"></div>

【讨论】：