[TIL # 31] Vue 5일차

Yejin Yang·2022년 5월 24일

TIL

[TIL]

목록 보기

31/69

Vite

빌드 도구 vite 사용하기

설치

// vite-test는 생성할 폴더명
$ npm create vite@latest vite-test

설치 시 framwork, variant를 선택하라고 나오는데 현재 vue를 사용하고 있으니, vue를 체크해주면 된다.

// 폴더 이동
$ cd vite-test
// vscode 열기
$ code .
// 열린 폴더에서 전체 install 진행
$ npm i

경로 별칭 설정

// vite.config
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [
      { find: '~', replacement: `${__dirname}/src` }
    ]
  }
})

Vue style scoped

<style scoped>
input {
  background-color: red;
}
</style>

scoped 를 쓰면 해당 스타일이 현재 이 컴포넌트에만 해당된다.

data- 는 전역속성이다. 뒤에 랜덤 값은 hash라고하는 임의의 데이터이다.

v-model 양방향 데이터 바인딩

//app.vue

<template>
  <h1>{{ msg }}</h1>
  <TextField v-model="msg" />
</template>

<script>
import TextField from '~/components/TextField.vue'

export default {
  components: {
    TextField
  },
  data() {
    return {
      msg: 'Hello Vue!'
    }
  }
}
</script>

// 자식 컴포넌트
<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>

<script>
export default {
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  }
}
</script>

:value="modelValue" modelValue를 사용해야 자동으로 부모에게 연결된다.

그런데 v-model을 하더라도 값을 수정할때 어차피 자식은 수정 권한이 없다. 권한은 부모에게 있다. 그래서
props로 받은걸 v-model로 연결하면 안된다. 일단 단방향으로 연결한다.

// 단방향 데이터 바인딩
// this.value인데 템플릿에선 this 생략 가능
<template>
  <input :value="value" />
</template>

keep-alive를 사용하는 동적 컴포넌트

컴포넌트를 내가 바꾸고 싶을 때 바꾼다!

출처: Vue.js - 동적 & 비동기 컴포넌트

is 속성 사용

<component :is="currentTabComponent" class="tab"></component>

keep-alive

동적 컴포넌트는 다른 컴포넌트로 갈 때 상태가 유지 되지않는다. 이때 keep-alive를 사용하면 상태를 유지 한 상태로 컴포넌트들을 이동할 수 있다.

<keep-alive>
  <component :is="currentTabComponent"></component>
</keep-alive>

Teleport

<template>
  <div class="box">
    <Modal>
      Hello Modal!
    </Modal>
  </div>
</template>

만약 Modal태그를 div로 감싼다면? 모달의 position: absolute, fixed 속성은 상대적으로 배치된 부모 div를 기준으로 동작하는 문제가 생긴다.

Teleport는 전역 상태에 의존하거나 컴포넌트로 분리하지 않고도 DOM에서 HTML을 랜더링할 부모 엘리먼트를 제어할 수 있는 방법이다.

<template>
  <Teleport to="body">
    <div class="modal">
      <div class="bg"></div>
      <div class="contents">
        <slot></slot>
      </div>
    </div>
  </Teleport>
</template>