전체 글474 컴포넌트 - Refs ref: 선언된 요소를 참조할 때 사용하는 속성 라이프 사이클 속성중 mounted 에서는 사용 가능 하지만 created에서는 사용이 불가능 하다. 기본 코드 App.vue Hello world! 브라우저 확인 수정한 코드 App.vue Hello world! Hello world2! Hello.vue Hello! Good! 브라우저 확인 2021. 8. 4. 컴포넌트 - Provide, Inject 바로 밑에 자식 컴포넌트로 데이터를 넘겨줄 때에는 props 속성을 이용하여 사용할 수 있다. 조상 component에서 후손 component에서 데이터를 한번에 내보낼 때에는 provide 속성을 이용할 수 있다. provide를 이용할 때에는 기본적으로 반응성을 제공하고 있지 않기 때문에 설정을 추가해 주어야 한다 후손 component 에서는 inject를 속성을 이용하여 데이터를 받는다. 수정전 코드 App.vue component -> parents 코드 component -> Child 코드 {{ msg }} 브라우저 확인 provide, inject를 이용한 코드 App..vue Click!! App: {{ message }} Child.vue Child: {{ msg.value }} Pa.. 2021. 8. 4. 컴포넌트 - slot slot: 부모요소의 텍스트가 없을 때 component에 slot에 입력된 데이터가 출력된다.(Fallback Contents) v-slot 속성을 이용하여 컴포넌트에 데이터를 출력할 수 있다 v-slot을 약어로 '#'으로 사용할 수 있다. v-on: '@' v-bind: ':' 컴포넌트 코드 App.vue 코드 (B) Banana 브라우저 확인 2021. 8. 4. 컴포넌트 - Emit 컴포넌트에서 부모요소 vue 파일에서 선언된 이벤트를 사용하기 위해서는 Emit이라는 속성을 사용해야 한다. 부모요소에서 이벤트 이름을 사용자가 정의하여 사용하고 component에서 emits에서 부모요소 이벤트 이름을 선언해주고 component 이벤트 선언부에서 적용해준다. Emit 속성을 이용하여 부모요소의 이벤트들을 사용할 수 있다. App.vue 코드 Banana component 코드 확인 Emit 확인 Event 객체를 전달 받는 방법 v-model(양방향 데이터 바인딩): 브라우저 확인 2021. 8. 4. 컴포넌트 속성 상속 컴포넌트를 사용할 때 컴포넌트 내부에 최상위 객체(template 바로 밑 요소)가 한개 이상일 경우 컴포넌트를 사용하는 쪽에서 스타일이나 클래스같은 속성을 직접적으로 선언하여도 적용이 안된다. 따라서 컴포넌트 쪽에 설정을 추가하여 사용자가 원하는 속성을 적용 시킬 수 있다. script 부분 // 컴포넌트를 사용하는 쪽에서 속성을 지정할 때 사용여부 inheritAttrs: false, Html 부분 App.vue 파일에서 지정한 속성중 원하는 속성만 사용하는 방법 속성을 한번에 적용하는 방법 App.vue 코드 Banana 컴포넌트 파일(MyBtn2.vue) App.vue 파일에서 지정한 속성중 원하는 속성만 사용하는 방법 속성을 한번에 적용하는 방법 브라우저 확인 콘솔 확인 2021. 8. 4. 컴포넌트 - 기초 props: 부모와 자식간의 데이터 통신을 하며 사용자가 원하는 속성을 변경하는 script 속성 컴포넌트 코드(myBtn.vue) text 부분은 text 속성을 이용해서 사용할 수 있고, slot을 사용하여 직접적으로 선언하여 설정할 수 있다. App.vue 코드 text 속성을 이용할 때에는 MyBtn에 text설정을 넣어줘야 하고 slot을 사용할 때에는 text 속성을 이용안해도 되고 외부에 적용해도 된다. 컴포넌트 사용: 사용자가 색상을 변경 script에서 색상을 변경 large 클래스를 추가 Banana 브라우저 확인 2021. 8. 3. 이전 1 ··· 18 19 20 21 22 23 24 ··· 79 다음
