2021년 06월 25일

Note

Vue.js

• 컴포넌트 데이터 전달
  1. store 사용, 하위 컴포넌트에서 computed 속성을 이용
  computed: {
    userInfo() {
      return this.$store.state.userInfo
    }
  }

  2. props 사용하기
  <user-profile :info="userInfo"></user-profile>

  // UserProfile.vue
  props: {
    info: Object 
  },

  3. vuex에 적합한 방식은 데이터는 props로 전달을 한번 더 해주는 것이 아니라, 표현하는 곳에서 가져오는 것
  4. slot 사용하기, 상위 컴포넌트에서 들어갈 내용을 정의한다.
     • <template>은 화면에 그려질 때 HTML 태그가 없이 그려진다.
     • props는 컴포넌트 간 데이터 의존성이 생기고, slot은 화면 표현을 재정의 하는 것! 목적을 잘 구분해서 사용한다.

log

• 오전에 운동갔다가 몇년만에 도날드에 갔는데 여전히 사람 많고 맛있었다. 배불러서 걸어서 집에 왔는데 그게 문제였다. 그러고 잠시 약속이 있어 나갔다 들어오니 거의 저녁에 되어 에너지가 바닥이 났다. 저녁 먹기 전까지 너무 힘들고 공부도 안될 것 같다라는 마음을 품고 있었지만 밥을 먹고 좀 쉬니 다시 힘이 난다. 역시 밥이 보약이다.