● props 사용법 (부모컴포넌트 -> 자식컴포넌트로 내려받기)
App.vue
- 제일 상단 위에서 :todos 을 내릴 때 사용한다.
더보기
<TodoList
:todos="todos"
@toggle-todo="toggleTodo"
@delete-todo="deleteTodo"
/>
TodoList.vue
- 자식 컴포넌트에 props로 내려받아 사용한다.
더보기
props: {
todos: {
type: Array,
required: true
}
},
● emit사용법 (자식컴포넌트 -> 부모컴포넌트로 올려받기)
- 예시) 배열을 지우는 이벤트 적용
TodoList.vue
더보기
<button
class="btn btn-danger btn-sm"
@click="deleteTodo(index)"
>
Delete
</button>
더보기
export default {
props: {
todos: {
type: Array,
required: true
}
},
emits: ['toggleTodo', 'deleteTodo'],
setup(props, { emit }){
const deleteTodo = (index) => {
emit('delete-todo', index)
}
const toggleTodo = (index) => {
emit('toggle-todo', index)
}
return {
deleteTodo,
toggleTodo
}
}
}
deleteTodo 이벤트를 emit으로 부모 컴포넌트로 올린다.
setup 에 있는 { emit } 은 원래 context 안에 들어있음.
App.vue
더보기
<TodoList
:todos="todos"
@toggle-todo="toggleTodo"
@delete-todo="deleteTodo"
/>
setup () {
const todos = ref([])
const todoStyle = {
color: 'gray',
textDecoration: 'line-through'
}
const deleteTodo = (index) => {
todos.value.splice(index,1)
}
const toggleTodo = (index) => {
todos.value[index].completed = !todos.value[index].completed
}
const addTodo = (todo) => {
todos.value.push(todo)
}
return {
todos,
todoStyle,
addTodo,
deleteTodo,
toggleTodo
}
}
해당 컴포넌트에 이벤트를 적용시켜준뒤,
부모컴포넌트에서 사용하면 됨.ㅎㅎ
'FRONT > VUE' 카테고리의 다른 글
[vue3] 이벤트 버블링 이란? (0) | 2024.04.24 |
---|---|
[vue3] router-view 사용법 (0) | 2024.04.23 |
[vue3] computed, watchEffect, Watch 사용법 (0) | 2024.04.23 |
[vue3] ref, reactive 사용법 (0) | 2024.04.20 |
[vue3] vue3 초기셋팅 (0) | 2024.04.19 |