使用从Vue组件导入?

时间:2019-05-01 18:19:00

标签: javascript vue.js

我有一个components.js文件,如下所示:

import { lookCoordinate } from './tools.js'; // I get: SyntaxError: Unexpected token {

Vue.component('coordform', {
  template: `<form id="popup-box" @submit.prevent="process" v-if="visible"><input type="text" autofocus refs="coordinput" v-model="coords"></input></form>`,
  data() {
    {
      return { coords: '', visible: false }
    }
  },
  created() {
    window.addEventListener('keydown', this.toggle)
  },
  destroyed() {
    window.removeEventListener('keydown', this.toggle)
  },
  methods: {
    toggle(e) {
      if (e.key == 'g') {
        if (this.visible) {
          this.visible = false;
        } else
          this.visible = true;
      }
    },
    process() {
      lookCoordinate(this.coords) // Tried to import from tools.js
    }
  }
});

但是我得到: Uncaught SyntaxError: Unexpected token {

如何从另一个普通的JS文件导入函数并在Vue组件中使用它?

谢谢。

3 个答案:

答案 0 :(得分:2)

如果尝试在未启用ES6支持的情况下加载Javascript文件,则会出现此错误。解析器在开始解析文件时不理解import的语法。

检查您的webpack或vue-cli设置,以确保您正在编译代码。

例如,浏览器不知道import的含义,普通的旧节点也不知道,除非启用实验性支持。

您也可以将其更改为:

const  lookCoordinate  = require('./tools.js').lookCoordinate; 

,看看是否给您一个错误。这种格式几乎可以做同样的事情。

如果通过浏览器使用import,还应按照Orkhan Alikhanov在评论中的建议启用模块支持。

It is supported if you add script with type="module". e.g: 
<script type="module" src="main.js"></script> 

答案 1 :(得分:1)

如果您使用type="module"添加脚本,则支持:

<script type="module" src="main.js"></script>

答案 2 :(得分:0)

您可以在没有{}的情况下尝试此操作吗。

import { lookCoordinate } from './tools.js'

{}用于在tools.js中定义多个功能时使用

喜欢

import { lookCoordinate, lookCoordinate2 } from './tools.js'