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

我试图从另一个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)
}
}
})

您不需要访问$options对象:

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

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

编辑您的评论:要使用没有捆绑器或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();

相关内容

最新更新

热门标签：