[Vue] Level1 - 5. Vue-cli

세팅순서

• VS Code 설치
• Git 설치: http://git-scm.com/download/win
• node.js (버전확인하고)설치: https://nodejs.org/ko/download/
• npm 설치: VS Code 터미널에 npm install
• vue-cli 설치: VS Code 터미널에 npm install -g @vue/cli

 

props

상위 컴포넌트에서 하위 컴포넌트로 data 전달하는 방식. 

* 개발자툴 수시로 확인

• 하위 컴포넌트(AppHeader.vue)
  
  1. components 폴더에 컴포넌트 파일 생성하고 < 로 기본 템플릿 작성
  2. 인스턴스 속성에 props 작성

//AppHeader.vue(하위 컴포넌트)

<template>
  <div>
    {{propsdata}}
  </div>
</template>

<script>
export default {
  props: ['propsdata'],
}
</script>

<style>
...
</style>

 

• 상위 컴포넌트(App.vue)
  1. App.vue에 하위 컴포넌트 import하고 인스턴스 속성의 components에 등록
  2. template에 하위 컴포넌트 가져다 씀
  3. 해당 컴포넌트에 v-bind:하위컴포넌트의 프롭스 명="상위컴포넌트의 데이터 명"으로 바인딩

//App.vue(상위 컴포넌트)

<template>
  <div>
    <app-header v-bind:propsdata="name"></app-header>
  </div>
</template>

<script>
import AppHeader from './components/AppHeader.vue';

export default {
  data() {
    return {
      name: 'jj'
    }
  },
  components: {
    'app-header': AppHeader,
  },
}
</script>

<style>
...
</style>

 

props

상위 컴포넌트에서 하위 컴포넌트로 data 전달하는 방식.

 

event emit

하위 컴포넌트에서 상위 컴포넌트로 data 전달하는 방식.