prop을 자식 컴포넌트에 넘겨주는 것 처럼, 어떤 틀에 "template 자체"를 넘겨서 자식 컴포넌트에서 렌더할 수 있음. HTML 삽입 미리보기할 수 없는 소스
분류 전체보기
1. v-for문 안에서 v-if를 쓰지 않는다. 이유 : v-for문이 실행 된 후 v-if문이 실행되기 때문에, if문 조건에 따라 분기처리 되는게 아니라 for문을 도는 모든 요소을 다 거치게 된다. 해결 : computed에서 for문을 돌릴 배열을 만들어 그 값을 v-for로 사용한다. → 로직과 마크업 코드를 분리하여 가독성 증가 → 리렌더링 될 때마다 매번 for문이 실행되는게 아니라, computed 값이 바뀌었을 때만 다시 실행될 것이다. computed: { cheapProducts: () => { return this.products.filter(function (product) { return product.price < 100 }) } } 2. created나 watch에서 met..
data는 computed를 계산하기 전에 평가된다. 때문에 data의 값을 computed값으로 대입할 수 없는 것이다. 해결 : 굳이 이런 로직을 써야한다면, watch로 computed값이 바뀌었을때 data를 초기화해주는 방법을 활용할 수 있다. ※ data값으로 store값을 사용할 수는 있다. 참고자료 https://stackoverflow.com/questions/44318343/use-computed-property-in-data-in-vuejs
slot 슬롯은 어떤 콘텐츠를 다른 컴포넌트에 전달할 수 있게 됨. 활용 사례 : 캐러셀을 만들때 부모 컴포넌트1과 2는 공통된 자식컴포넌트를 사용함. 그러나 그 자식 컴포넌트의 레이아웃은 같지만 컨텐츠 내용만 바꿔 사용할 때 slot 활용할 수 있음. 리액트에서의 outlet과 비슷하다고 생각됨. 공식문서 : 영문 사이트 한글 사이트 ✅ 기본사용 - 특정 컨텐츠를 전달 (단일 슬롯 사용) Parent1과 Paren2는 Child컴포넌트를 공통으로 사용한다. 그러나 컨텐트 내용은 어떤 부모 컴포넌트 인지에 따라 다르게 나타내야 하는 상황. Parent에서 아무 컨텐츠도 쓰지 않았다면, 기본 값으로 slot에 정의해둔 컨텐츠인 "default" 가 나온다. // Parent1.vue - "/home" ho..
a태그와 router-link는 라우터 주소를 이동시킬 때 사용한다. 이 둘은 비슷하지만 다음과 같은 차이점이 있기 때문에, vue에선 a태그보단 router-link 사용을 선호한다. a태그 : 페이지 전체가 다시 실행되게 됨. (spa 구현x) router-link : 브라우저의 "새로고침 없이"도 다른 페이지로 이동시켜주는 컴포넌트임! (spa 구현ㅇ) 공식문서 : https://v3.router.vuejs.org/kr/api/#router-link
