自定义组件引入报错

￡神魔★判官ぃ 2021-09-27 18:06 547阅读 0赞

问题描述：我今天写了一个组件，该组件和引用该组件的页面放到了相同的目录内。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5NzY4Nzk_size_16_color_FFFFFF_t_70]

报错信息：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5NzY4Nzk_size_16_color_FFFFFF_t_70 1]  
看到了这个问题，小编很郁闷，首先想到去找度娘，发现度娘上很多人的讲解很我遇到的问题的关联不是很大。所以小编还是喜欢自己投入研究。  
最后发现问题出在了组件引进的地方：

以前的引入方式：
        import myTree from 'myTree'
        <script>
          import myTree from 'myTree'
          export default {
            name: 'myTree',
            components:{
              myTree
            }
          }
        </script>
        说明：上面的引入小编考虑，该组件与该页面是在同一个目录下，所以通过此种方式来引入肯定是正确的。但是报错。
        最后小编通过自身的努力发现上面的引入方式不对，修改为如下的方式后代码显示正常：
            <script>//
      ***import asideTree from '../mypage/asideTree'***
      export default {
        name: 'asideTree',
        components:{
          asideTree
        }
      }
    </script>
    修改的方式：先退出一层，然后再进来。小编觉得这个是vue的一个bug。
    希望对您的有帮助谢谢。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5NzY4Nzk_size_16_color_FFFFFF_t_70]: /images/20210923/e7ecfe321bf246698ce8902cc70bb752.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5NzY4Nzk_size_16_color_FFFFFF_t_70 1]: /images/20210923/3fe0d284a53244e187f1a029fb529570.png