Vue.js 하위 구성 요소를 구성 요소로 가져오기

Vue.js 하위 구성 요소를 구성 요소로 가져오기

오늘 나는 웹앱을 만들고 있지만, 지금은 웹앱을 수입하고 싶다.Todo나의Todolist구성 요소내 구성 요소:

앱(부모) --> 토돌리스트(자녀) --> 토도(자녀)

오류:

24:5 error "작업" 구성 요소가 등록되었지만 vue/사용되지 않음 구성 요소 없음

코드

토돌리스트

<template>
<!-- TEMPLATE FOR THE TODOS -->

  <div v-for="(todo) in todos" :key="todo.id">
    <Todo
      :todo="todo.text"
      :index="todo.id"
      :checked="todo.checked"
      :deleteTodo="deleteTodo"
    />
  </div>

</template>

<script>
import Todo from './Todo'

export default {
  name: 'Todolist',
  props: {
    todos: Array
  }
}
</script>

지휘선에는 수입이 들어왔다고 되어 있는데, 아직 수입은 사용되지 않았다.

너희들이 날 도와줬으면 좋겠어

미리 고마워!

하위 구성 요소의 내보내기를 가져오는 것이 첫 번째 단계로, 현재 모듈에서 사용할 수 있다.그러나 가져온 구성 요소는 를 사용하여 상위 구성 요소에 등록해야 함components옵션:

부모

import Todo from './Todo'

export default {
  name: 'Todolist',
  props: {
    todos: Array
  },
  components: {  // ✅ add this
    Todo
  }
}

동적으로 부품을 가져올 수 있으며, 위에서 설명한 것처럼 등록이 여전히 필요하다.

대신 사용:

import Todo from './Todo'

이 옵션

const Todo = () => import('./Todo')

필요한 경우에만 구성 요소가 로드된다.

또는

가져오기 및 등록하여 구성 요소를 추가할 수 있음components

components: {            
            Todo: () => import('./Todo'),
        },

참조URL: https://stackoverflow.com/questions/66172849/vue-js-import-child-component-into-a-component