javascript - 如何将外部 javascript 插入到 Vue 组件中

Question

我正在尝试将自定义 JavaScript(草图绘制器)插入到 Vue 组件中，但到目前为止还没有成功。当我尝试将 javascript 直接插入到模板中时，如下所示:

<template>
    <div id="sketcher">
        var sketcher = new ChemDoodle.SketcherCanvas('sketcher', 400, 300);
    </div>
</template>

我收到错误:“模板应该只负责将状态映射到 UI。避免在模板中放置具有副作用的标签，例如 ，因为它们不会被解析。” 我的另一个尝试是在不同的 .js 文件中创建一个组件并将其导入到 Vue 组件中。

草图绘制器.js:

export default ({
  mounted(){    
   return new ChemDoodle.SketcherCanvas('sketcher', 400, 300)
  }
})

首页.vue

<template>
    <div id="sketcher">
       <app-sketcher></app-sketcher>
    </div>
</template>

<script>
import sketcher from './sketcher';    
export default {
    components: {
    "app-sketcher": sketcher
    }
}
</script>

但我收到此错误:“无法安装组件:模板或渲染函数未定义”。我非常感谢任何有关如何解决此问题或提出将 javascript 嵌入到 Vue 组件的其他选项的建议。

Answer 1

您的第一条错误消息是不言自明的:您不能输入 <script>标签 <template>单文件 Vue 组件。

在第二个示例中，您没有为 app-sketcher 定义模板。当您在 Home.vue 中注册它时，组件文件。您的sketcher.js文件仅导出 mounted 的定义钩子(Hook)，没有别的。

<小时/>

你可以做一个Sketcher.vue文件:

<template>
  <div id="sketcher"></div>
</template>

<script>
export default {
  mounted() {    
    return new ChemDoodle.SketcherCanvas('sketcher', 400, 300)
  }
}
</script>

然后使用导入它并在您的 Home.vue 中使用它像这样的文件:

<template>
  <app-sketcher/>
</template>

<script>
import AppSketcher from './Sketcher';    
export default {
  components: { AppSketcher }
}
</script>