【Web前端问题】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，反正会被编译成能执行的代码。

回答：

静态文件？index.html加个标签啊...要不就import进来啊...

回答：

如果 引入的js里不止一个函数怎么办？

以上是 【Web前端问题】vue cli构建的项目中，vue组件里怎么引入外部js文件里的方法 的全部内容， 来源链接： utcz.com/a/142782.html

回到顶部