맨동이

컴포넌트 - Refs 1.1 개념 비록 props와 이벤트가 존재하지만, 가끔은 자식 요소에 JavaScript를 이용해 직접 접근해야 하는 경우가 있습니다. 이 경우, ref 속성을 이용해 레퍼런스 ID를 자식 컴포넌트나 HTML 요소에 부여함으로써 직접 접근할 수 있습니다. mounted() { const h1El = document.querySelector('#hello') console.log(h1El.textContent) } 원래의 경우라면 위처럼 DOM API를 사용하게 됩니다. 하지만 참조하겠다는 의미의 ref 라는 속성을 사용하면 해당 기능을 간단하게 사용할 수 있습니다. 1.2 Refs 사용 예시 //App.vue Hello world! export default { mounted() ..

1. Provide & Inject 1.1 개념 일반적으로 데이터를 부모에서 자식 컴포넌트로 전달해야할 때 props를 사용합니다. 특정한 두 컴포넌트 사이에 깊이 중첩된 컴포넌트가 있는 구조의 경우 하위 컴포넌트에서 상위 컴포넌트의 무언가가 필요한 경우를 상상해보십시오. 이 경우에 두 컴포넌트 사이의 모든 컴포넌트에 prop를 전달해야하므로 굉장히 번거로울 것입니다. 이러한 경우 provide와 inject 쌍을 사용할 수 있습니다. 부모 컴포넌트는 컴포넌트 계층 구조의 깊이와 상관없이 모든 자식에 대한 종속성 제공자 역할을 할 수 있습니다. 이 기능은 2개의 부분으로 구성됩니다: 부모 컴포넌트는 데이터 제공을 위해 provide 옵션을 사용하며, 자식 요소는 데이터 사용을 위해 inject 옵션을 사..

컴포넌트 - Slot 1. Slot 1.1 Fallback Contents //App.vue(부모 컴포넌트) Cherry export default { components: { MyBtn } } //MyBtn.vue(자식 컴포넌트) slot의 태그로 부모 컴포넌트에서 받을 데이터의 자리를 표시하면 Cherry라는 텍스트를 화면에 출력할 수 있었습니다. 하지만 여기서 slot 태그 내에 내용을 입력할 수 있습니다. //App.vue(부모 컴포넌트) //MyBtn.vue(자식 컴포넌트) Apple slot 태그 내에 텍스트를 입력하면, 그 내용이 출력됩니다. 하지만 부모 컴포넌트에 내용이 없을 경우에만 출력되며, 부모 컴포넌트에 텍스트가 있다면 해당 내용이 출력됩니다. 이렇게 slot 태그 내에 입력한 컨텐..

컴포넌트 - Emit 1. 이벤트 상속 //App.vue(부모 컴포넌트) Banana export default { components: { MyBtn }, methods: { log() { console.log('Click!!') } } } //MyBtn.vue(자식 컴포넌트) export default { inheritAttrs: false } MyBtn 태그에 클릭 이벤트 발생시에 실행할 method를 연결하였습니다. 그러나 @click이라는 속성으로 연결을 하였기 때문에 자식 컴포넌트에 inheritAttrs: false 값으로 인해 클릭을 하여도 method가 실행되지 않습니다. 자식 컴포넌트에 최상위 요소가 2개 이상이고 inheritAttrs 옵션을 사용해야하는 경우라면 이벤트를 적용할 수 ..

컴포넌트 - 속성 상속 1. 속성 상속 1.1 클래스 상속 //App.vue(부모 컴포넌트) Banana //MyBtn.vue(자식 컴포넌트) // 최상위 요소(Root Element) 부모 컴포넌트의 html 요소에 class 속성으로 값을 입력한 경우, 자식 컴포넌트의 btn이라는 클래스에 상속이 됩니다. 이러한 개념을 속성 상속이라고 합니다. //MyBtn.vue(자식 컴포넌트) // 최상위 요소(Root Element) // 최상위 요소(Root Element) 하지만 자식 컴포넌트에 template 태그 안에 있는 최상위 요소가 2개 이상일 경우에는 부모 컴포넌트에 입력한 속성 값이 어느 부분에 상속이 되어야하는지 판단할 수 없기 때문에 두 요소 모두 상속이 되지 않습니다. 1.2 스타일 상속 ..