Vue.js 기초 파트 6 | 구성품

구성품

오늘은 Vue.js에서 components에 대해 이야기해보겠습니다.

이것은 내 Vue.js 기본 시리즈의 6부입니다. 5부를 읽으려면 클릭하세요(스포일러! 5부는 watch 속성에 관한 것입니다).

대부분의 경우 웹 애플리케이션을 만들 때 구성 요소가 필요합니다. 왜요? 이런 식으로 생산하고 유지하는 것이 더 쉽기 때문입니다.
따라서 부모 및 자식 구성 요소가 있습니다. 먼저 이미지를 공유하고 그에 대한 설명을 드려 이해하기 쉬울 것입니다.



위의 이미지에서 볼 수 있듯이 몇 가지 구성 요소가 있습니다. 이 이미지는 Medium에서 가져온 것입니다. 대부분의 경우 주성분은 App.js 입니다. 그것이 우리가 모든 구성 요소를 하나로 모으는 곳입니다. 그런 다음 상단 표시줄, 영웅, 카드, 카드 등을 위한 더 작은 구성 요소가 있습니다. 이미지 하단에 'Card component'와 'Cards component'가 보입니다. 즉, Vue에서 생성한 구성 요소를 재사용할 수 있습니다. 카드의 정보가 API에서 온다고 상상해 보십시오. 우리가 해야 할 일은 전송props과 '카드 구성 요소'를 반복하여 동적으로 가질 수 있도록 하는 것입니다. props에 대해서는 추후 포스팅에서 다루도록 하겠습니다.

이것이 코드에서 어떻게 작동하는지 봅시다. 그런데 아직 Vuejs tutorial을 코딩하고 있습니다.

<script>
  import ChildComp from './ChildComp.vue'
export default {
  components: {
    ChildComp
  }
}
</script>

<template>
  <ChildComp />
</template>

위의 코드는 'App.vue' 파일입니다. 자식 구성 요소를 사용하려면 먼저 가져와야 합니다. 그렇게; import ChildComp from './ChildComp.vue' . 구문은 다음과 같습니다import something from path. 따라서 원하는 대로 이름을 지정할 수 있지만 경로는 정확해야 합니다. 그렇지 않으면 작동하지 않습니다. 의미 있는 이름을 지정하는 것이 모범 사례이므로 기술적으로는 가능하더라도 원하는 이름을 지정하지 마십시오.

자식 구성 요소를 가져온 후에는 위의 코드와 같이 components 개체에 등록해야 합니다. 마지막으로 하위 구성 요소<ChildComp />를 이와 같이 사용할 수 있습니다. 구문은 <ComponentName /> 입니다.

분명히 무언가를 가져오고 사용하려면 그 무언가가 있어야 합니다. 자, 여기 우리 자식 컴포넌트의 코드가 있습니다.

<template>
  <h2>A Child Component!</h2>
</template>

여기까지가 6부입니다. Vue.js의 구성 요소에 대해 이야기했습니다.

다음으로 Vue의 props를 살펴보겠습니다.