[vue] vue tutorial 뷰 튜토리얼 -4- (뷰 부모자식 통신 props 사용법)

소스코드 첨부합니다(https://github.com/jaeho310/vue-tutorial)

목차

vue tutorial -1- (뷰 시작하기)

vue tutorial -2- (컴포넌트와 인스턴스)

vue tutorial -3- (앱바 만들기)

vue tutorial -4- (props 사용하기)

vue tutorial -5- (뷰 라우터 사용하기)

vue tutorial -6- (뷰티파이 테이블)

 

 

이번 게시글에서는 vuetify를 사용한 footer 퍼블리싱과 부모 컴포넌트와 자식컴포넌트의 데이터 교환방법, vue에서의 document.ready(function()) 을 정리합니다.

 

1. footer.vue

<template>
  <v-footer
    color="transparent"
    absolute
  >
    <v-spacer />
    <div>
        &copy; 
        {{ year }}, 
        Made by <v-icon>mdi-vuetify</v-icon>
        <a
        href="https://frozenpond.tistory.com/"
        >{{author}}</a>
    </div>
  </v-footer>
</template>

<script>
export default {
  props: {
    author: String
  },
  data() {
    return {
      year: ''
    }
  },
    mounted() {
    this.getCurrentYear()
  },
  methods: {
    getCurrentYear() {
      let myDate = new Date()
      this.year = myDate.getFullYear()
    }
  }
}
</script>

<style>

</style>

 

 (1) 퍼블리싱

저는 퍼블리싱은 vuetify에서 가져다 씁니다.

https://vuetifyjs.com/en/components/footer/

Footer component

- v-footer 태그를 이용합니다.

저는 색상과 absolute를 이용해 위치만 정해주고, v-spacer 태그를 이용해서 내용을 구석으로 보냈습니다.

물론 더 이쁜걸 좋아하시면 vuetify 공식문서에서 이쁜걸 가져다 쓰셔도 됩니다.

 

- ©

copylight 기호를 표현한것이고

 

- <v-icon>mdi-vuetify</v-icon> 

vuetify에서 icon은 이런식으로 넣습니다.

<v-icon> 태그안에 mdi에서 지원하는 리소스를 넣어주면 원하는 아이콘을 쉽게 가져다 쓸 수 있습니다.

 

- 핵심

핵심은 {{ year }}와 {{ author }} 입니다.

 

 

(2) {{ year }}

{{ }} 안에 들어가는 내용은 vue instance의 변수입니다.

  data() {
    return {
      year: ''
    }
  },

vue instance를 보면 data가 있습니다.

변수를 선언하는 곳으로 year라는 변수가 선언된 곳입니다.

그러나 year는 비어있습니다. 

누가 어디서 언제 채워줬냐면

 

jquery의 $(function(){}), document.ready(function(){}) 랑 비슷한 역할을 하는 mount가 채워줬습니다.

 

vue에서는 mount라는 인스턴스가 jquery의 $(function(){})과 유사한 역할을 합니다.

  mounted() {
    this.getCurrentYear()
  },
  methods: {
    getCurrentYear() {
      let myDate = new Date()
      this.year = myDate.getFullYear()
    }
  }

 

Vue는 생성(create)되고 Dom에 부착(mount)되고 갱신(update)되고 소멸(destroy)되는 4가지 과정을 거칩니다.

mount는 vue가 생성해준 가상 dom이 실제 dom에 부착된후 실행되므로

DOM 관련 요소를 제어하기 가장 좋은 단계입니다.

따라서 mount에 화면에 보여줄 year를 채워주는 로직을 작성하면 됩니다.

서버와의 ajax통신도 여기서 진행하면 됩니다.(vue에서는 보통 axios를 사용하여 비동기 통신을 합니다.)

 

 

(3) {{ author }}

  props: {
    author: String
  },

{{ author }} 역시 vue instance의 변수를 가져옵니다.

이번에는 data가 아니라 props 라는 인스턴스에 넣어놨습니다.

그러나 이번에도 값은 없고 웬 자료형만 정의해놨습니다.

해당 인스턴스는 부모와의 통신을 할때 사용됩니다.

 

- App.vue

<template>
  <v-app>
    <core-app-bar />
    <core-view />
    <core-footer author="jaeho" />
  </v-app>
</template>

<script>
import CoreAppBar from '@/components/core/AppBar'
import CoreView from '@/components/core/View'
import CoreFooter from '@/components/core/Footer'

export default {
  name: 'App',
  components: {
    CoreAppBar,
    CoreView,
    CoreFooter
  },
};
</script>

footer의 부모 컴포넌트는 App.vue입니다.

core-footer 태그의 author 속성에 원하는 문자열을 넣어주면

자식 컴포넌트의 props의 author에 값을 전달할 수 있습니다. 

(props와 짝을 이루는 emit도 학습해 보시면 좋습니다, 단순 부모-자식 관계가 아닌 부모-자식-자식 끼리 데이터를 교환할때는 2단 props를 사용하지않고 vuex라는 상태관리 라이브러리를 사용합니다.) 

 

2. 웹브라우저로 확인하기

$ npm run serve 명령어를 통해 프론트 서버를 띄우고

웹 브라우저에서 localhost:8080 에 접근합니다. 

 

footer가 생겼습니다.