vue2 组件循环引用报错

1.报错[Vue warn]: Unknown custom element: <tree-folder-contents> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <TreeFolder>

   <Root>
   ,

我的代码
<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<title>jjj</title>

</head>
<body>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://unpkg.com/vuex"></script>
<div id="example">
  <tree-folder :folder="folder"></tree-folder>
</div>
<script type="text/javascript">


// 创建根实例
new Vue({
el: '#example',
data(){
return {
  folder:{
    name:'jjj',
    children:[
      {name:222},
      {name:3333,children:[
        {name:4444}
      ]}
    ]
  }
}

},
components:{

treeFolder:{
  template:`
  <p>
    <span>{{ folder.name }}</span>
    <tree-folder-contents :children="folder.children"/>
  </p>`,
  props:['folder']
},
treeFolderContents:{
  template:`
  <ul>
    <li v-for="child in children">
      <tree-folder v-if="child.children" :folder="child"/>
      <span v-else>{{ child.name }}</span>
    </li>
  </ul>`,
  props:['children']
}

}

})
</script>

</body>
</html>

阅读 3k
2 个回答

你没有把treeFolder这个组件注册到treeFolderContents内部

解决的方式:全局引入组件,并且在vue实例化前。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题