vue.js/기술23 [vue] 이벤트 버블링 관련 수식어 공식문서에 이벤트 핸들링 중 버블링과 관련된 수식어 들이 보여 정리함. https://vuejs.org/guide/essentials/event-handling.html#event-modifiers Event Handling | Vue.js vuejs.org click.stop 위 코드를 실행할 시엔 문제가 한 가지 있다. 바로 click.stop을 우클릭하였을시 부모,자신,자식 총 세번의 abc함수가 호출이 됨 의도와 맞다면 문제가 없겠지만 의도와 다를시 이를 다룰 수 있어야됨 수식어를 정리하기전 이벤트 전파 현상에 대해 알아야하는데 이벤트 전파 현상이란 위의 예시처럼 클릭한 DOM(이벤트가 발생한 DOM)과 겹쳐있는 부모나,자식 DOM까지 같이 선택이 되어서 이벤트가 발생하는 것을 이벤트 전파 현상이.. 2022. 3. 17. [vue] debounce 사용하기 feat.(throttle) debounce와 throttle의 공통 키워드로는 '연속성' 입니다. 우리는 특정 함수를 호출할 시, 이벤트리스너와 관련된( ex: scroll )함수를 호출할 시 해당 이벤트들이 너무 연속적으로 수행될 때가 있습니다. debounce와 throttle은 이를 방지하기 위한 기술입니다. - debounce 이벤트를 호출한 후, 일정시간이 지나야 해당 실행문장을 실행합니다 => 키를 입력하면 값이 출력되는 이벤트를 호출한다 가정했을시, 마지막에 입력했을 때를 기점으로 설정한 시간만큼 재호출이 없어야 실행문장이 실행됩니다. - throttle 이벤트를 호출한 후, 실행문장을 한 번 실행하고, 설정한 시간만큼은 재호출을 해도 응답하지 않습니다. 1. lodash를 설치 후 가져와 사용 2. debounce는.. 2022. 3. 16. [vue] $nextTick 사용하기 가끔 우리가 Dom을 그려줄때나 접근할 때, Dom을 그려주고 접근하는 것이 비동기적으로 처리가 되어 귀찮아 질 때가 있습니다. 예시론, 바인드완료 위 코드와 같이 mount된 후 1. isBind에 true값을 주어 2. #spanEle Dom을 그리고 3. 그 후에 #spanEle를 console.log로 접근해 보면 위 사진과 같이 null이란 결과가 나옵니다. 이 이유는 맨 첫 문단에 작성했던 Dom을 그린 후, 다음 실행문장이 동기적으로 진행되는 것이 아닌 비동기로 진행되어 #sapnEle Dom이 그려지기 전에 console.log로 접근하기였기 때문입니다. 공식문서에서 살펴보니 이와 같은 상황에 nextTick을 사용하라 나와있네요. https://vuejs.org/guide/essentia.. 2022. 3. 16. [vue] emit을 props처럼 관리하기 특별한건 아니고 props처럼 script부분에 명시해두는 것 부모 컴퍼넌트 자식 컴퍼넌트 자식이 abc라는 이름으로 1452라는 값을 넘기고 부모가 받아서 bar함수를 실행시켜 콘솔에 노출시킨다. 이 동작자체가 바뀌는건 없고 그냥 2번째 이미지처럼 명시해둘 수 있음 emits: { abc:Number } 혹시 그냥 vue에서 아예 무시를 하나 테스트하기위해 emits에 적혀진 소스를 아래와 같이 살짝 수정해봄 emits: { abcd:Number } 감지를 하긴 하네용. 따로 명시를 해 두지 않아도 emit자체는 잘 동작하기 때문에 개인이나 팀이 성격에 맞추면 될 듯 합니다. 2022. 2. 24. [vue] provide / inject 컴포넌트 계층 구조가 굵어 여러 단계를 거쳐 props를 해야 하는 경우 매우 귀찮고 복잡해 질 수 있다. 그럴 때 provide / inject 를 사용 export default { name: 'Home', components: { About }, provide () { return { provideDate: [1, 2, 3, 4, 5] } } } provide로 데이터를 뿌리고 export default { name: 'Children', inject: ['provideDate'] } inject로 받아온다. 다만 위와 같이 사용했을 시 어느 부모컴퍼넌트에서 받아온 값인지 찾기 힘들 수 있다. 그래서 inject의 형태를 변경해 조금 더 상세한 설정이 가능함 //부모 //자식 {{ injectDat.. 2022. 1. 19. [vue] v-slot 컴포넌트의 디자인을 바로 아래에 있는 컴퍼넌트에 전달해 재활용할 수 있는 기능이다. 부모 컴퍼넌트에 v-slot (#title) 로 정의 후 제목입니다 export default { name: 'Home', components: { About }, } 자식 컴퍼넌트에 를 이용해여 재활용한다 about 이라는 자식컴퍼넌트에선 로 감싸진 화면을 손쉽게 재활용 가능 동적으로 slot 할당하기 slotNum 데이터를 이용해 slot id를 동적으로 부여했다. 버튼을 클릭할때마다 slot id가 1,2를 왕복하며 움직인다. //부모 컴퍼넌트 {{slotNum}} //자식컴퍼넌트 1번쨰 슬롯 슬롯바깥 slotNum이 1일때에는 "슬롯바깥"이 출력되고 slotNum이 2일때에는 "1번째 슬롯"과 "슬롯바깥"이 출력된.. 2022. 1. 19. 이전 1 2 3 4 다음
