더보기
● teleport
제일 상단에 넣을 태그를 쓴다.
index.html
더보기
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<div id="modal"></div>
<!-- built files will be auto injected -->
</body>
</html>
TodoList.vue
<teleport to="#kossie">
<div>Kossie</div>
</teleport>
해당 코드가 제일 상단으로 올라간다.
● slot
v-on: => @
v-bind: => :
v-slot => #
Modal.vue
더보기
<Modal
v-if="showModal"
@close="closeModal"
@delete="deleteTodo"
>
<template #title>
Delete Todo!!!
</template>
<template #body>
Are you sure you want to delete the todo?
</template>
</Modal>
TodoList.vue
더보기
<div class="modal-header">
<h5 class="modal-title">
<slot name="title"/>
</h5>
<button
type="button"
class="btn-close"
aria-label="Close"
@click="onClose"
/>
</div>
<div class="modal-body">
<slot name="body"/>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
@click="onClose"
>
Close
</button>
<button
type="button"
class="btn btn-danger"
@click="onDelete"
>
Delete
</button>
</div>
List.vue
-> 리팩토링 item의 값을 slot에 내려준다.
더보기
<template>
<div
v-for="(item,index) in items"
:key="index"
class="card mt-2"
>
<slot :item="item" :index="index" />
</div>
</template>
<script>
export default {
name: 'vue-list',
props: {
items: {
type: Array,
required: () => []
}
}
}
</script>
<style>
</style>
TodoList.vue
-> 사용법은 List 의 :items="todos"의 값을 넣고
template에 기본값인 default에 객체 구조분해 할당으로 item, index를 넘겨 받아 사용해준다.
더보기
<List :items="todos">
<template #default="{ item, index }">
<div
class="card-body p-2 d-flex align-items-center"
@click="moveToPage(item.id)"
>
<div class="flex-grow-1">
<input
class="mx-2"
type="checkbox"
:checked="item.completed"
@change="toggleTodo(index, $event)"
@click.stop
/>
<span
:style="item.completed ? todoStyle :{}"
:class="{ 'todo': item.completed }"
>
{{item.subject}}
</span>
</div>
<div>
<button
class="btn btn-danger btn-sm"
@click.stop="openModal(item.id)"
>
Delete
</button>
</div>
</div>
</template>
</List>
'FRONT > VUE' 카테고리의 다른 글
| [vue3] vuex란? (0) | 2024.04.25 |
|---|---|
| [vue3] 라이프사이클 생명주기 (0) | 2024.04.24 |
| [vue3] 자바스크립트 객체 복사/비교 (0) | 2024.04.24 |
| [vue3] 이벤트 버블링 이란? (0) | 2024.04.24 |
| [vue3] router-view 사용법 (0) | 2024.04.23 |
