vuejs 재귀적 단일 파일 구성 요소

vuejs 재귀적 단일 파일 구성 요소

알 수 없는 사용자 지정 요소: - 구성 요소를 올바르게 등록했습니까?재귀 구성 요소의 경우 "이름" 옵션을 제공해야 합니다.

각각 TreeList를 포함하는 TreeNode를 포함하는 TreeList가 포함된 TreeList는 각각 TreeList를 포함합니다.

나는 이것에 대해 다른 사람들이 문제를 가지고 있다는 것을 많이 읽었다.컴포넌트에 케밥 케이스명을 지정하는 등의 솔루션을 시도해 보았습니다.네임스페이스에 문제가 있다고 읽은 적이 있습니다.모든 컴포넌트를1개의 파일로 조작하는 예가 있기 때문에 동의합니다.구성 요소가 별도의 파일에 있는 경우 vue CLI를 사용하여 스크립트를 다시 로드할 때 위의 오류가 발생합니다.파일을 저장할 때 설명 없이 오류가 사라지고 재귀가 다시 작동합니다.

정상적으로 동작하면, 자노드를 클릭할 때에 에러가 발생합니다.

simpleNormalizeChildren에서 정의되지 않은 속성 '길이'를 읽을 수 없습니다.

vue CLI 서비스와 관련이 있습니까?글로벌 네임스페이스에 이러한 것을 선언하는 것은 열려 있습니다.다만, 그것이 어떻게 기능하는지는 확실히 알 수 없습니다.

import TreeList from './TreeList.vue'

export default {
    name: 'tree-node',
    components: {
        'tree-list': TreeList
    },

...

import TreeNode from './TreeNode.vue'

export default {
    name: 'tree-list',
    components: {
        'tree-node': TreeNode
    }

...

import TreeList from './TreeList.vue'
import TreeNode from './TreeNode.vue'

export default {
    name: 'Sidebar',
    components: {
        TreeList,
        TreeNode
    }

이 문제는 아마도 고객 간의 순환 참조가 원인일 것입니다.TreeList그리고.TreeNode컴포넌트..

자세히 보면 렌더링 트리에서 이들 구성요소가 실제로 서로의 후손이자 조상임을 알 수 있습니다. 역설적이죠!

이 모순을 해결하려면 다음을 사용하여 컴포넌트를 글로벌하게 등록할 수 있습니다.Vue.component또는 컴포넌트 중 하나의 Import를 나중에 (Import를) 연기할 수 있습니다.beforeCreate후크 또는 비동기 컴포넌트 사용) ..

TreeList.vue

export default {
    name: 'tree-list',
    components: {
        'tree-node': () => import('./TreeNode.vue')
    }
    ...
}

Vue 3에서는 비동기 컴포넌트를 사용할 수 있습니다.

export default {
  name: 'tree-list',
  components: {
    'tree-node': defineAsyncComponent(() => import('./TreeNode.vue'))
  }
}

문서:

• https://v3.vuejs.org/guide/migration/async-components.html#_3-x-syntax
• https://v3.vuejs.org/guide/component-dynamic-async.html#async-components

언급URL : https://stackoverflow.com/questions/53747661/vuejs-recursive-single-file-components