Posis

이번 포스트는 Provide/inject를 활용한 컴포넌트 데이터 전달에 대해서 다뤄보겠습니다. props와 provide/inject 컴포넌트 간에 데이터 전달에는 props와 provide/inject 두 가지가 존재합니다. props: 컴포넌트 태그마다 작성을 해서 데이터를 보내서 자식 컴포넌트 안에서 script안에 props를 정의해 주어야 합니다. 단, 컴포넌트를 여러 번 거친다고 할 때 모든 컴포넌트마다 작성을 해 주어야 합니다. provide/inject: provide와 inject는 컴포넌트 태그에 작성하지 않습니다. script안에 작성하며 props와 다른 점은 컴포넌트가 여러 번 거쳐도 최상위 컴포넌트와 최하위 컴포넌트 단 두 곳에서만 작성하면 데이터 전달이 이루어집니다. prop..

이번 포스팅에서는 computed에 대해서 알아보겠습니다. computed 연결된 data의 값이 변경되었을 때, 복잡한 계산식을 계산해서 값을 캐싱해서 return 해주는 속성입니다. 캐싱 값을 계산하여 잠시 동안 저장해두는 것을 의미합니다. {{ msg }} 문자열 뒤집기 {{ reverseString }} 위 예제 코드는 'Hello Vue.js!!' 문자열을 뒤집어주는 코드입니다. 함수를 살펴보면 reverseString()은 msg의 문자열을 뒤집어주는 역할, changeMsg()는 isDone의 boolean값을 바꿔주기만 한다. 예제 코드를 실행하면 나오는 첫 화면입니다. 여기서 문자열 뒤집기 버튼을 클릭하면 'Hello Vue.js!!'가 뒤집어진 문자열이 화면에 나타나게 됩니다. 이때 콘..