천소희

기록하는 개발자

업데이트:

카테고리:

/

태그:

⭐ export 종류에 따른 import 유형
export const example = () ⇒ {} ⇒ import example from ‘example’
export default example = () ⇒ {} ⇒ import { example } from ‘example’

Scoped Slot

v-slot ⇒ #

TodoList.vue

<List :items="todos">
    <template #default="slotProps">
      <div class="card-body p-2 d-flex align-items-center" style="cursor: pointer" @click="moveToPage(slotProps.item.id)">
        <div class="flex-grow-1">
          <input class="mx-2" :checked="todo.completed" type="checkbox" @change="toggleTodo(index, $event)" @click.stop>
          <span :class="{ todo: todo.completed}"></span>
        </div>
        <div>
          <button class="btn btn-danger btn-sm" @click.stop="openModal(todo.id)">Delete</button>
        </div>
      </div>
    </template>
  </List>

ListChild.vue

<div class="card mt-2" v-for="(item) in items" :key="item.id">
  <slot :item="item"></slot>
</div>

ListChild에서는 item에 접근이 가능하지만 TodoList에서는 접근이 불가하다.

그래서 ListChild에서 해당 객체를 넘겨주고 template에서 #default으로 해당 객체를 받아 사용한다.

위에 코드는 slotProps.item 에 정보가 들어가 있다.

slotProps는 객체이기 때문에 구조분해할당으로 { item } 으로 간편하게 넘겨줄 수 있다.

Todo 입력폼 재사용

스타일 변경이나 생기면 components만 수정하면 되기에 추후 관리가 편해짐

<div class="form-group">
    <label></label>
    <input type="text" class="form-control" v-model="todo.subject">
    <div v-if="error" class="text-color mb-3"> </div>
  </div>

v-model에 todo.subject가 존재하지 않음

value로서 부모 컴포넌트에서 가져와서 넘겨주면 되지만 값이 넘어가지는 않음!

그래서 emit으로 Form 데이터를 보내고 값을 갱신하면 된다.

컴포넌트에 v-model을 사용가능하다!

<!-- TodoFrom -->
<Input v-model:subject="todo.subject" label="Subject" :error="subjectError"/>

<!-- TodoInput -->
const onInput = (e) => {
      emit('update:subject', e.target.value)
    }

v-model:자식컴포넌트에서 받는 이름="보낼 데이터" 로 작성

자식 컴포넌트에서는 emit(update:객체이름, 보낼데이터) 으로 데이터를 보내주면 부모 컴포넌트에서 emit 함수를 만들 필요 없이 바로바로 데이터의 변경을 감지 가능하다!

v-model 옆에 아무것도 작성하지 않으면 props에서 modelValue 으로 작성해야된다

useContext ⇒ 근데 난 안됨? 왠지는 모르겠음

setup(props, {emit}) {} emit을 사용하려면 사용하지 않는 props까지 작성해야된다.

그래서 useContext를 통해 emit, props 같은 function을 사용할 수 있다.

setup() {
    const { emit } = useContext()
 }

toRef

  • reactive를 가진 변수를 함수로 단독으로 빼서 사용할 때 가끔 끊어지는 현상이 발생한다.
//count.js
import { reactive } from "vue"

export const useCount = () => {
  const state = reactive({
    count: 0
  })

  return state
}

<template>
  <h1>Home Page</h1>
  <h2>8</h2>
  <button @click="count++">Add</button>
</template>

<script>
import { useCount } from '@/composables/count'

export default {
  setup() {
    const { count } = useCount()

    return {
      count
    }
  }

}
</script>

해당 버튼을 누를 때 변화가 없다

⇒ reactive 객체 안에 있는 property는 구조분해로 빼올 떄 reactive를 잃어버리게 된다.

count.js 에서 return 시 toRefs() 로 묶어주면 구조분해로 할당해도 reactive를 잃어버리지 않는다.

axios baseUrl

앱이 커지면 커질수록 url 관리가 힘들어지기에 파일로 따로 빼서 관리를 한다.

src>axios.js 를 새로 생성한다.

import axios from 'axios'

export default axios.create({
  baseURL: 'http://localhost:3000/' //기본으로 사용할 url 설정
})

await axios.patch('todos/' + id, {
          completed: checked
        })

await axios.patch('http://localhost:3000/todos/' + id, {completed: checked})

// 기본으로 작성된 Url은 생략되도 된다!
await axios.patch('todos/' + id, {completed: checked})

⭐ 추후에 url 모두 관리하는 파일로 사용하면 관리가 매우 깔끔할 듯!

참고