javascript - vue cli构建的项目中,vue组件里怎么引入外部js文件里的方法
本文介绍了javascript - vue cli构建的项目中,vue组件里怎么引入外部js文件里的方法的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
我想在content组件里调用外部js(test.js)里的diyfun方法,怎么实现呢?
我的content组件代码:
<template>
<div>
<input ref='test' id="test">
<button @click='diyfun'>Click</button>
</div>
</template>
<script>
export default {
data () {
return {
testvalue: ''
}
}
}
</script>
我的test.js代码:
console.log('Test info')
function diyfun() {
console.log('Success')
}
我知道可以将方法直接定义到组件里,比如这样:
<template>
<div>
<input ref='test' id="test">
<button @click='diyfun'>Click</button>
</div>
</template>
<script>
export default {
data () {
return {
testvalue: ''
}
},
methods: {
diyfun: function () {
console.log('Success')
}
}
}
</script>
但是代码一多看着好乱,就想将方法定义在外部js文件里,在组件里调用它,求实现方法。
解决方案
自己解决了:
content组件代码:
<template>
<div>
<input ref='test' id="test">
<button @click='diyfun'>Click</button>
</div>
</template>
<script>
import {myfun} from '../js/test.js' //注意路径
export default {
data () {
return {
testvalue: ''
}
},
methods:{
diyfun:function(){
myfun();
}
}
}
</script>
test.js代码:
function myfun() {
console.log('Success')
}
export { //很关键
myfun
}
关键是用到了es6的语法,大胆用es6,反正会被编译成能执行的代码。
这篇关于javascript - vue cli构建的项目中,vue组件里怎么引入外部js文件里的方法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文