vue18 component slot Vue component를 만들 때 내부에 텍스트 들을 template에 반영하려면 어떻게 하는지 알아보자. 새로운 뷰 컴포넌트가 my-comp라고 하자 Hello Vue.component('my-comp', { template: ' ' } 와 같은 방식으로 작성하면 Hello가 반영되지 않는다. 반영하게 하려면 어떻게 해야할까? template: ' ' 으로 작성하면 된다. 부분이 Hello로 바뀌는 것을 확인할 수 있다. 컴포넌트 내용으로 넣을 때 slot의 이름을 지정하는 것도 가능하다. 이러면 Vue의 template에서 원하는 위치에 해당 요소를 위치시킬 수 있다. 다음과 같다. input이 slot1으로 지정되어 실제 화면에서 뒤쪽으로 위치가 변경되었다. html에서 Vue의 data에서 가져.. 2020. 7. 9. component props, emit 와 같은 구조로 작성하고 app에 Vue 인스턴스르 붙이면 컴포넌트간의 구조는 어떻게 될까? 여기선 app에 붙인 컴포넌트가 my-comp보다 상위 컴포넌트가 된다. 따라서, app에 붙은 컴포넌트를 vm이라고 하면 vm은 my-comp에게 props를 통해 데이터를 전달할 수 있다. 반대로 my-comp는 vm에게 데이터를 어떻게 전달할까? 답은 emit을 사용해서 전달한다. 데이터를 전달하는 것은 아니고 이벤트를 전달하게 된다. 아래 코드의 구조를 보면 my-comp를 만들 때 my-msg props에 vm의 message 값을 넘겨주기 위해서 :my-msg="message"를 사용했다. 반대로 my-comp에서 클릭을 발생했을 때 이벤트를 vm으로 넘겨주기 위해서 my-comp methods에 up.. 2020. 7. 9. component props 컴포넌트 사용의 큰 이유는 재사용성이다. 이를 위해 함수 인자로 받는 방식과 유사한 props라는 속성을 정의하여 사용한다. 컴포넌트를 사용하는 부분에서 넘겨준 데이터를 사용하는 것이다. msg에 다음과 같이 4개의 값들을 사용했다. 1. type 은 props로 받을 데이터 타입을 의미한다. 다를 경우 콘솔에 에러 메세지를 출력한다. 2. default 은 컴포넌트 사용시 msg의 값이 할당되지 않으면 사용할 값이다. 3. required가 true이면 컴포넌트 사용시 msg props에 값을 넣어주어야한다. 값이 할당되지 않으면 콘솔에 에러를 출력한다. 4. validator은 유효성 검사를 위한 함수이다. value는 msg에 할당된 값이며 이를 이용해 필요한 검사를 실시한다. boolean 값을 .. 2020. 7. 9. vue component hello world vue에서 컴포넌트라는 것이 있다. UI의 그룹이라고 불리는데 간단하게 살펴보고 넘어가자. 2020. 7. 9. 이전 1 2 3 4 5 다음
