如何从外部 JavaScript 触发 Vue.js 方法答案

【问题标题】：How to trigger Vue.js method from external JavaScript如何从外部 JavaScript 触发 Vue.js 方法
【发布时间】：2021-05-08 11:32:54
【问题描述】：

我正在尝试从另一个 JavaScript 文件中的函数触发 Vue.js 方法。我已经给出了我尝试过的以下代码。

sample.js

import vm from './vue.js';

function call( ) {
  vm.$options.methods.displayData('I was called externally!')
}

call()   // Here I am calling function

vue.js

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

【问题讨论】：

标签： javascript html vue.js vuejs2 vue-component

【解决方案1】：

您不需要访问$options 对象：

vm.displayData('I was called externally!')

这只是使用实例来访问其方法。

在下面为您的 cmets 进行编辑：要根据需要使用没有捆绑器或 es6 模块的文件，请删除仅适用于模块的 import 语句。

以下是 index.html、vue.js、sample.js 所需的 3 个完整文件：

index.html

<html>
<body>
  <div id="app"></div>
  <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
  <script src="vue.js"></script>
  <script src="sample.js"></script>
</body>
</html>

vue.js

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

sample.js

function call( ) {
  vm.displayData('I was called externally!')
}

call();

【讨论】：