WEB67 [Vue.js] Custom Directive Custom Directive 기본 Directive 세트( v-model또는 와 같은 v-show) 외에도 Vue를 사용하면 고유한 사용자 지정 Directive를 등록할 수 있습니다. Directive Hooks Directive 정의 개체는 여러 후크 기능을 제공할 수 있습니다(모두 선택 사항). const myDirective = { // called before bound element's attributes // or event listeners are applied created(el, binding, vnode, prevVnode) { // see below for details on arguments }, // called right before the element is inserted.. 2022. 7. 27. [Vue.js] provide & inject provide & inject 일반적으로 데이터를 부모에서 자식 컴포넌트로 전달해야할 때 props를 사용합니다. 특정한 두 컴포넌트 사이에 깊이 중첩된 컴포넌트가 있는 구조의 경우 하위 컴포넌트에서 상위 컴포넌트의 무언가가 필요한 경우를 상상해보십시오. 이 경우에 두 컴포넌트 사이의 모든 컴포넌트에 prop를 전달해야하므로 굉장히 번거로울 것입니다. 이러한 경우 provide와 inject 쌍을 사용할 수 있습니다. 부모 컴포넌트는 컴포넌트 계층 구조의 깊이와 상관없이 모든 자식에 대한 종속성 제공자 역할을 할 수 있습니다. 이 기능은 2개의 부분으로 구성됩니다: 부모 컴포넌트는 데이터 제공을 위해 provide 옵션을 사용하며, 자식 요소는 데이터 사용을 위해 inject 옵션을 사용합니다. 폴더구조.. 2022. 7. 25. [Vue.js] 레이아웃 컴포넌트 레이아웃 컴포넌트 일반적인 웹사이트를 보면 고정적인 영역을 가지는 레이아웃을 가지고 있습니다. 이를 재사용 컴포넌트로써 만들어 보겠습니다. project |--src |--component | |--layouts ||--HeaderLayout.vue ||--FooterLayout.vue |--App.vue |--main.js 작동 순서 App.vue는 main.js에 import 되어 있으므로 App.vue에 레이아웃 컴포넌트를 배치를 하면 됩니다. App.vue에서 레이아웃 컴포넌트를 import를 한 이후에 해당 태그를 template안에 배치하여 레이아웃을 만들수 있습니다. App.vue HeaderLayout.vue router-link to="경로" 테그를 통해서 router에 정의한 path로.. 2022. 7. 24. [Vue.js] Slot 알아보기 Slot 재사용 컴포넌트를 만드는 방법중 하나입니다. bootstrap의 modal기능을 가진 코드를 Slot을 이용하여 사용 방법을 알아보겠습니다. 앞 포스팅에서 나온 재사용컴포넌트는 화면 구성요소를 정의하고 데이터를 부모에서 자식 또는 자식에서 부모로 전달해가면서 데이터를 사용하는 재사용컴포넌트입니다. 하지만 slot은 부모에서 자식컴포넌트의 특정 부분만 HTML요소를 재정의 하여 사용할수 있습니다. 참고 modal기능은 재사용성이 좋고 modal안의 내용만 바뀌면 다양한곳에 사용이 가능하므로 재사용컴포넌트로 만든 것입니다. 즉, 데이터만 주고받는게 아니라 HTML UI자체가 바뀌는 것은 slot으로 만들면 좋습니다. 예제 폴더구조 project |--src |--component | |--fragm.. 2022. 7. 22. 이전 1 2 3 4 5 ··· 17 다음
