본문 바로가기

JavaScript/Vue26

Nested Router Nested Router(네스티드 라우터)는 라우터로 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있다. 네스티드 라우터를 이용하면 URL에 따라서 컴포넌트의 하위 컴포넌트가 다르게 표시된다. 2022. 6. 6.

[Vue.js] router URL의 해시 값(#)을 없애는 법 vue router의 기본 URL 형식은 해시 값(#)을 사용한다. 만약 index.html/login과 같이 해시 값을 없애고 싶으면 히스토리 모드(history mode)를 활용하면 된다. var router = new VueRouter({ mode: 'history', routes }) 2022. 6. 6.

Vue router Vue router는 vue에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리이다. Vue router를 구현할 때 필요한 특수 태그의 기능은 다음과 같다. 태그 설명 페이지 이동 태그. 화면에서는 로 표시되며 클릭하면 URL로 이동한다. 페이지 표시 태그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역. 뷰 라우터 예제 Main 컴포넌트로 이동 Login 컴포넌트로 이동 var app = new Vue({ router }).$mount('#app') 이 부분은 새 인스턴스를 생성하고 라우터의 정보가 담긴 router를 추가하는 코드이다. 여기서 $mount()는 el 속성과 같이 인스턴스를 화면에 붙여주는 역할을 한다. 인스턴스를 생성할 때 el 속성을 넣지 않았더라도 생성하고 나서 .. 2022. 6. 6.

같은 레벨의 컴포넌트 간 통신 1. 먼저 이벤트 버스로 활용할 새 인스턴스를 1개 생성하고, eventBus라는 변수에 참조한다. 이렇게 하면 eventBus라는 변수로 새 인스턴스의 속성과 메서드에 접근할 수 있다. 2. 하위 컴포넌트에는 template 속성과 methods 속성을 정의한다. template 속성에는 '하위 컴포넌트 영역입니다'라는 텍스트와 show 버튼을 추가한다. methods 속성에는 showLog() 메서드를 정의하고 메서드 안에는 eventBus.$emit()을 선언하여 triggerEventBus라는 이벤트를 발생하는 로직을 추가한다. 이 이벤트는 발생할 때 수신하는 쪽에 인자 값으로 100이라는 숫자를 함께 전달한다. 3. 상위 컴포넌트의 created 라이프 사이클 훅에 eventBus.$on()으로.. 2022. 6. 6.

하위에서 상위 컴포넌트로 이벤트 전달하기 : $emit 이벤트를 발생시켜 상위 컴포넌트에 신호를 보내면 된다. 상위 컴포넌트에서 하위 컴포넌트의 특정 이벤트가 발생하기를 기다리고 있다가 하위 컴포넌트에서 특정 이벤트가 발생하면 상위 컴포넌트에서 해당 이벤트를 수신하여 상위 컴포넌트의 메서드를 호출한다. 이벤트 발생과 수신은 $emit()과 v-on: 속성을 사용하여 구현한다. // 이벤트 발생 this.$emit('이벤트명') $emit을 호출하면 괄호 안에 정의된 이벤트가 발생한다. 일반적으로 $emit()을 호출하는 위치는 하위 컴포넌트의 특정 메서드 내부이다. 따라서 $emit()을 호출할 때 사용하는 this는 하위 컴포넌트를 가리킨다. // 이벤트 수신 호출한 이벤트는 하위 컴포넌트를 등록하는 태그에서 v-on: 으로 받는다. 하위 컴포넌트에서 발생.. 2022. 6. 5.

상위에서 하위 컴포넌트로 데이터 전달하기 : props props란? 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용하는 속성 2022. 6. 5.

이전 1 2 3 4 5 다음

티스토리툴바