[24.05.29] Vue.js_컴포넌트 심화

01. css 관리

1. 전역css

• 메인에서 관리
• assets/main.css에 정의

2. 컴포넌트css

• scoped
• module / $style / 케멀표기법으로 써야함

02. Slot

1. 의미

• 자식에게 템플릿 전달 → 커스터마이징하겠다.

2. 자식 : 위치 설정

3. 부모 : 손보기

• 위치는 자식이 설정 / 나(부모)는 모양만 살짝 손보겠다.

※ 비슷한 사용법들이다.

4. 식별자 배정 : 여러개 슬롯

• 여러개 지정할때
• 자식:이름설정 / 부모 : v-slot:자식이름
• 레이아웃 잡을때, 많이 사용함
• 이름 안줘도 됨 → 부모:디폴트됨 → 하나만 가능
• 교체작업이 쉬우지는 장점이 있다 → 화면 디자인을 다르게 가져갈 수 있다.
• 주로 범용에서 사용한다 → 변경이 자주있을때 →재사용이 자주 일어날때 주로 쓰인다

03. 사용자 정의 v-model

1. 의미

• 내가 만든 것 양방향으로 쓰겠다
• 부모 : 업뎃된 자식 요소랑 내꺼랑 엮겠다 → 부모할일 줄어들게 된다.
• 자식 : 업뎃 시키는 이벤트 발생시켜줌

04. provide, inject

• 실제 프로젝트에서 쓸 수 있다
• 조상 관계가 같아야함

1. provide

• 함수로 객체 리턴 → 자식한테 넘어감

2. inject

• 부모꺼 가져옴

---

05. 오후수업

1. 컴포넌트

• 코드뭉치이다 : 다른 곳에서 태그로 사용할 수 있다

2. 디렉토리

1) 의미 : 커스텀 속성

• 디렉토리 명칭(이름) : 아큐먼츠(벨류).수정자=”벨류(자바스크립트표현법으로 작성)”
  
• 디렉토리마다 수정자는 정해져있다 → on이면 on / if면 if수정자 등등
• 디렉토리 명칭 = 벨류를 넣는다(대입한다)

3. slot

1) v-slot

• v슬롯 = #으로 줄일 수 있다

<templete v-slot=aaa> → <templete #aaa>
  인수는 디폴트가 기본으로 전달됨

2) 명칭

• 부모탬플릿 → 슬롯 컨텐츠
• 자식탬플릿 → 슬롯 아울렛

3) name 설정

• 자식 슬롯안에 있는 내용은 디폴트값임 / 부모에 없으면 나오는 값 →> 대체 컨텐츠라고 부름

<slot><slot>

• 이름이 없는 슬롯은 → default 라고 출력

<slot name=’’><slot> 정해주면 → 네임으로 나오게 해줄 수 있음

4) 범위 슬롯

• 슬롯 프롭스 라고 부른다.
• 객체인지 구분 할때, ={} 으로 되어있으면 객체

4. 동적 컴포넌트

1) V-model

• 에밋할때, 이벤트명은 update으로 꼭 해줘야함

this.$emit(update.aaaa, e.target.value) 

• @update:model 어쩌구
• v모델은 업데이트가 디폴트이기 때문에, change.aaa 어쩌구 안됨

2) Teleport

• Vue에서 콘텐츠를 DOM 구조의 다른 위치로 이동하는 데 사용되는 태그