[vue3] props, emit 사용법

● 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

    }

  }

해당 컴포넌트에 이벤트를 적용시켜준뒤,

부모컴포넌트에서 사용하면 됨.ㅎㅎ