Vue.js(2) Component/Router

kyj2471·2021년 1월 14일
0

Vue.js

목록 보기
2/8

Vue.js 컴퍼넌트 통신

상위 컴포넌트 ---> 하위 컴포넌트

  • props 전달
    하위 컴포넌트 ---> 상위 컴포넌트
  • event 발생

props

props속성은 컴포넌트 간에 데이터를 전달 할 수 있는 컴포넌트 통신법이다.
props속성을 기억할 때 상위 컴포넌트에서 하위 컴포넌트로 내려주는 속성이라 기억하자

props 속성 코드

props속성을 이용하려면 하위 컴포넌트의 내용을 상위 컴포넌트 탬플릿에 각각 코드를 추가해 주어야한다.
코드를 보자

//하위 컴포넌트
var childComponent = {
  props: ["props 속성 명"]
}

//상위 컴포넌트
<div id = "app">
    <child-component v-bind:props속성명="상위 컴포넌트 데이터 속성"></child-component>
</div>

Event 발생

이벤트 발생은 컴포넌트 통신 방법중 하위 컴포넌트에서 하위 컴포넌트로 통신하는 방법이다.

event 발생 코드 형식

//하위 컴포넌트
this.$emit("event이름")
>
//상위 컴포넌트
<div id = "app">
  <child-component v-on:이벤트명="상위 컴포넌트의 실행할 메서드 명 또는 연산"><child-component>
</div>

Vue Router

view router란 라이브러리를 이용한 SPA를 구현할 때 사용한다.

설치

npm install vue-router

router 등록

설치이후 아래처럼 라우터 인스턴스를 하나 생성하여 뷰 인스턴스에 등록

//router 인스턴스 생성
var router = new VueRouter({
  //option of router
})
//인스턴스에 라우터 인스턴스 등록
new Vue({
  router:router
})

vue router option

지금 까지 잘하면 라우터에 옵션을 정의 해야한다.
SPA에서 필수적으로 등록해야할 2개의 옵션이 있다.

  • routes : 라우팅 할 URL과 컴포넌트 값 지정
  • mode : URL해쉬 값 제거 속성
new VueRouter({
  mode:"history",
  routes: [
    { path: "/경로", component:component },
    { path: "/경로2", component:component }
    ]
})

웹페이지에서 페이지 이동시 화면에 특징적인 링크를 클릭해서 이동합니다. 이게 router-link입니다.

출처:링크텍스트

profile
[ frontend-developer ]

0개의 댓글