vueevent 2

Vue.js 투두리스트 - props와 event로 리팩토링하기

이전까지는 각 콤포넌트 간의 데이터 통신을 설정해주지 않아서 사용자가 페이지에서 동작을해도 화면에 바로 반영이 되지 않았다. 이번 회차부터는 data를 app.vue 파일에 한군데 묶어 동장하도록 리팩토링한다! 이전에 배웠던 props와 event를 사용하게 된다! 리팩토링 정리 하위 콤포넌트의 펑션은 그대로 가져와도 되지만, 인자가 제대로 들어갔는지 확인해주면 된다! Vue.js 투두리스트 - props와 event로 리팩토링하기 2022/06/06 0.과정 요약! 입력 > 저장 > 배열 > 화면에 푸쉬 1.Todolist에 있는 기능을 Props로 만들기위해 App.vue로 옮기기 -todoList에서 입력하면 리스트 생기는 created 코드 script로 가져오기 -todoitems는 모든 파일에..

괴발개발 2022.06.06

Vue.js 컴포넌트 통신 방식과 event

1.Vue 인스턴스에 app-content 콤포넌트 정의해주기 -#app 아이디에서, -app-content 콤포넌트 -가지고 있는 data는 숫자로 10 new Vue({ el: '#app', components:{ 'app-content':appContent }, data: { num: 10 } }) 2.appContent 함수 정의해주기 -props안에 propsdata라 정의 (*여기서 실수함, 프롭스의 데이터 값이니까 그대로 propsdata라고 써주고, 나중에 v-bind에서 정확히 propsdata들 중에서(여러개라면) 어떤걸 사용할지 정의해줄수 있음) -{{}}로, propsdata값 그대로 보여주기 var appContent = { template: '{{propsdata}}', prop..

괴발개발 2021.08.18