공식문서 https://router.vuejs.org/ Vue Router router.vuejs.org 설치 vue-router를 사용할 프로젝트에 설치! // npm npm install vue-router // yarn yarn add vue-router vue-router 사용해보기 1. 라우팅을 적용할 만들기 라우팅을 적용할 컴포넌트를 만들어보자! 나는 "/", "/chicken", "/duckgugong" 경로에 적용할 컴포넌트를 각각 Home, Chicken, Duckgugong 이라고 만들었다! components/Home.vue This is "Home" Component components/Chicken.vue I'm "Chicken" Component components/Duckgug..

Slot 부모가 어떠한 template을 내려주면 자식이 slot 키워드를 이용해서 outlet처럼 사용할 수 있다! 부모가 내려준 template을 자식이 사용한다는 의미에용 문법이 헷갈릴 수 있는 개념이므로 예시를 통해 익혀보자! 부모 컴포넌트 기존에 부모가 자식 컴포넌트를 불러온 방식과는 약간 다르게? 자식 컴포넌트 사이에 어떠한 template을 넣어주고 있다! I'm fragment from parent 자식 컴포넌트가 slot이라는 키워드를 사용해서 부모 컴포넌트가 내려준 template을 사용할 수 있다! I'm slot child! Parent didn't provide any fragment 자식이 이라고 적어둔 부분에 부모 컴포넌트에서 내려준 I'm fragment from parent..

emit emit은 데이터의 흐름이 prop과 다르다. emit은 자식 컴포넌트가 부모 컴포넌트에게 데이터를 보낸다. 부모 컴포넌트의 state를 prop으로 받고 자식 컴포넌트에서 emit으로 이벤트를 사용하면 two-way-binding!! 자식이 사용할 이벤트핸들러 function을 부모가 사용할 이름을 달아서 emit한 후 부모가 이 function을 커스텀해서 사용할 수 있다. 또한, 파라미터로 데이터를 넣어서 보내서 부모가 이 데이터를 사용해서 state를 변경하거나 사용할 수 있다! 사용법 자식 컴포넌트 자식 컴포넌트 methods 부분에 이벤트핸들러로 사용할 function을 작성한 후 emit 키워드를 사용한다. 이 때, 부모가 v-on으로 사용할 이벤트의 이름을 넣어준다! 자식 컴포넌트..

Prop으로 function 넘기기 기존에는 React로 개발을 해왔기 때문에 부모에서 미리 자신의 상태를 변화시킬 function을 작성해서 props로 넘겨주고 자식에서 props로 받은 function을 이용해서 부모의 상태를 변경하는 방식이 익숙했었다. Vue.js도 prop으로 부모의 상태를 변경시키는 function을 받아서 자식 컴포넌트가 해당 function을 호출해서 부모의 상태를 변경하는 방식이 가능하다. 아래 예시를 살펴보자! button 사용할 때 부모 컴포넌트 부모 컴포넌트에서 미리 자신의 상태를 변경시키는 function을 작성해서 자식 컴포넌트에게 넘겨준다. {{ state }} 자식 컴포넌트 자식 컴포넌트는 부모 컴포넌트로부터 function을 받아서 이벤트리스너로 사용하면 ..