Vue.js

부모 컴포넌트자식 컴포넌트자식 컴포넌트 : 컴포지션 API - props, context 사용

App.vueApp.Composition

컴포지션API 형태로 셋업 시 반응성이 없어, vue에서 ref를 임포트하여 변수 할당시 ref를 추가한다.

document.querySelector('h1') 대신해 ref 사용해 봅니다.h1에 ref 속성을 부여하고,this.$refs.hello.textContent 선택 할 수 있습니다.단, mounted() 라이프사이클 훅에서 가능합니다.컴포넌트자식 컴포넌트의 최상위

조상 컴포넌트에서 후손 컴포넌트로 데이터를 내릴 때 자식 컴포넌트를 거치지 않고, provide를 전달, inject를 통해 받는다. 단, 반응성을 지니지 않아 조상 컴포넌트에서 데이터를 내릴 때 vue에서 import를 하여 msg: computed(() => thi

2개 이상 슬롯 사용 시 순서를 지정하기 위해 부모는 template에 v-slot 디렉티브를, 자식은 slot에 name 사용하여 슬롯 지정이 가능합니다. v-bind는 : v-on는 @ v-slot은 부모 컴포넌트자식 컴포넌트

부모 컴포넌트에서 @heropy="log", @change-msg="logMsg" 같이 이벤트를 자식 컴포넌트에 전달하면 emits: 'heropy', 'changeMsg' 으로 전달 받아 사용 가능합니다. emits에 등록된 emit은 $emit('heropy', $

자식 컴포넌트의 최상위 루트가 1개인 경우, 부모 컴포넌트에서 속성을 부여해주면 바로 상속을 받는다. 자식 컴포넌트의 최상위 루트가 2개 이상이면 v-bind="$attrs" 통해 받는다. 부모로 부터 속성 상속을 받지 않기 원하면 inheritAttrs: false

양방향 v-model, 코드의 간결함은 있지만 한글 입력시 한글자가 모두 완성될 때 반응성이 일어난다. (한글 입력 이슈)한글 이슈가 있는 프로젝트는 아래와 같이 단방향 @input을 이용하여 데이터 반응성을 일으킨다.

성능 문제가 될 경우 passive 수식어를 사용하여 사용자 경험을 개선할 수 있다.

이벤트 대상 1개, 핸들러 2개 인 경우 인자와 이벤트 객체를 같이 사용할 경우

created 라이프사이클 훅 : 컴포넌트가 연결된 후mounted 라이프사이클 훅 : 브라우저에 렌더링이 된 후