createjs技术博客

上篇文章讲了怎么拆分vue，但是初次拆分vue的时候很多会莫名出现一些bug，比如组件无法显示或绑定的ref为underfind，今天就来讲怎么解决这个问题。

刚碰到的时候我也找了很久，但是其实原因很简单的，那就是ide，导入文件的时候自动导入了js，而没有导入vue！。

比如我创建一个组件：

<template>
  <div class="page"></div>
  <ol-a-map></ol-a-map>
</template>

<script>
import script from "./script.js";
import OlAMap from "@/components/ol-a-map/script";
export default script
</script>
<!--下面这样也可以，但是有些ide会不识别script里面的代码，导致无法代码补全-->
<!--<script src="script.js"></script>-->

<style lang="scss" src="./style.scss" scoped></style>

这时候script文件里会被ide自动写入代码components: {OlAMap},而vue文件里会被写入import OlAMap from "@/components/ol-a-map/script";

（我用的webstorm，vscode需要自己下载补全插件）

这时候为了拆分的合理和美观我们会把这句代码，剪切进script里变成这样：

import OlAMap from "@/components/ol-a-map/script";
export default {
    name: "index",
    components: {OlAMap},
    //props负责读取参数,context负责emits事件
    setup(props,context)
    {
        return{
            //没有setup语法糖以后需要自己手动return
        }
    }
}

如果不这么做ide会提示OlAMap缺少import，但是无论剪不剪切其实这句代码都是有问题的，因为这里导入的是js，我们其实要导入的是vue！

所以我们需要把代码里的script去掉，变成这样：

import OlAMap from "@/components/ol-a-map";//这里去掉了
export default {
    name: "index",
    components: {OlAMap},
    //props负责读取参数,context负责emits事件
    setup(props,context)
    {
        return{
            //没有setup语法糖以后需要自己手动return
        }
    }
}

好了问题解决了，这个bug有时候很难被发现，而且极难被debugger出来，所以大家拆分vue以后，创建组件的时候多注意一下import的路径