如何從外部 JavaScript 觸發 Vue.js 方法

Question

我正在嘗試從另一個 JavaScript 文件中的 function 觸發 Vue.js 方法。 我已經給出了我嘗試過的以下代碼。

示例.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)
    }
  }
})

Answer 1

您不需要訪問$options object：

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

這只是使用實例來訪問其方法。

編輯下面的評論：要根據需要使用沒有捆綁器或 es6 模塊的文件，請刪除僅適用於模塊的import語句。

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

索引.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)
    }
  }
})

示例.js

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

call();

如何從外部 JavaScript 觸發 Vue.js 方法

問題描述

1 個解決方案

解決方案1
0 已采納 2021-02-04 07:32:38

如何從外部 JavaScript 觸發 Vue.js 方法

問題描述

1 個解決方案

解決方案1 0 已采納 2021-02-04 07:32:38

解決方案1
0 已采納 2021-02-04 07:32:38