[Vue] 뷰 component 사용법 및 정리

 

컴포넌트화 시키면 좋은 거

• 다른 곳에서 쓸거 같을 때 (재사용해야될 때)
• 라우터화 시킬 때 (라이브러리)
• html 이 너무 복잡하고 길 때 

 

 

---

순서

💜 자식

 

1. 컴포넌트화 시킬 자식 파일 만들기
    이름은 multiword 로 짓기 (DetailModal.vue ◀◀ 이런 식으로)

 

 

 

 

2. 자식컴포넌트 name key : 자식컴포넌트 이름 value

export default {
    name:'DetailModal',
    // 생략
}

 

 

 

 

 

💜 부모

1. 부모컴포넌트에 import 시켜주기

// templete 태그 밖에다가 해준다.

import DetailModal from './DetailModal.vue';

 

2. 부모컴포넌트 components key : 자식컴포넌트 이름 value

export default {
    components: {
        DetailModal,
    },
	// 생략
}

원래는 DetailModal : DetailModal인데 두 데이터가 같으면 하나만 적어도 된다.(js 문법)   

 

 

3. template 태그에서 사용하기

<DetailModal />