vue2의 emit은 vue3에서는 어떻게 쓸까?

인프런 - vue.js 캡틴판교 강의

 

기존 vue2 emit에 관한 문서자료이다. compostion API에서는 어떻게 될까?

 

위와 같다..

 

<script>
import { ref } from 'vue';
    export default {
        setup(props, context) {
            //data
            const todoInput = ref('');
            
            //methods
            function addTodo(){
                const todo = todoInput.value;
                context.emit('add', todo);
                clearTodo();
            }

            const clearTodo = () => todoInput.value = '';

            return {todoInput,addTodo}
        }
    }
</script>

 

이렇게 setup의 context.emit으로 올려서

  <TodoInput @add="addTodoItem"/>

기존과 같이 @하위호출메소드="현재메소드"로 연결할 수 있다.