JavaScript

emit를 사용해 자식컴포넌트에서 부모컴포넌트로 데이터를 보내도록 설정하면, 브라우저 콘솔에서 이렇게 경고를 보내주는 것을 볼 수 있다. vue.js 3부터 추가된 내용인데, props 등록한 것처럼 emits에 등록해주어야 한다. context 대신 emit을 바로 사용하는 방법도 있다.

(main) App.vue To-Do List 추가된 Todo가 없습니다. (sub) TodoList.vue {{ td.subject }} Delete

자식 -> 부모로 데이터 보낼 때에는 context의 emit 함수를 사용했고,반대로 부모 -> 자식으로 데이터 보낼 때에는 props를 사용한다. (main) App.vue To-Do List 추가된 Todo가 없습니다. (sub) TodoList.vue {{ td.subject }} Delete 주의할 점props -> One-Way Data Flow (vue.js 공식 홈페이지)모든 props는 부모에서 자식 컴포넌트로 one-way..

하나의 vue 파일로 작성한 소스들을 분리 -> 자식 컴포넌트 import, 부모/자식간에 데이터 보내는 방식(emit) main(App.vue) To-Do List 추가된 Todo가 없습니다. {{ td.subject }} Delete 자식 컴포넌트 추가하려면 자식컴포넌트에서 부모 컴포넌트로 데이터를 보낼 때 필요한게 context안에 있는 emit 함수이다. 첫번째 이벤트 이름을 작성하고, 두번째 부모로 올려줄 데이터 객체를 작성한다.

To-Do List Add this field cannot be empty ! 추가된 Todo가 없습니다. {{ td.subject }} Delete

style binding => object binding, array binding 등 방법이 많은데 vue.js 공식 홈페이지에서 확인해볼 수 있 아래 소스는 둘다 체크박스 true 일 때 스타일을 주는 방법인데, 스타일 바인딩과 클래스 바인딩 사용 차이 스타일 바인딩 To-Do List Add this field cannot be empty ! {{ td.subject }} ..