vue.js29 [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] 동적 컴퍼넌트 호출 feat. [Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with `markRaw` or using `shallowRef` instead .. vue 문서들을 보던중, 동적 엘리먼트 부분에서 v-is라는 속성을 보아 테스트 해봄 데이터에따라 동적으로 컴퍼넌트를 호출할때 사용한다 함 (vue3 기준) *주의점 vue2에서는 // vue2 is="HelloWorld" // vue3 :is="'HelloWrold'" 위와 같이 네이티브 태그에 is옵션을 사용하였고 vue3에서는 디렉티브로 바뀌어 문자열값을 사용할 경우 "" 안에 ''을 추가해주어야함 Vue는 반응성 객체로 만들어진 구성 요소를 받았습니다. 이로 인해 불필요한 성능 오버헤드가 발생할 수 있으므로 구성 요소를 'markRaw'로 표시하거나 'ref' 대신 'shallowRef'를 사용하는 것은 피해야 합니다. 1. ref가 없어서 그런가? x 아니었음 2. 뭔가 v-for의 :key처럼.. 2022. 2. 28. [vue] emit을 props처럼 관리하기 특별한건 아니고 props처럼 script부분에 명시해두는 것 부모 컴퍼넌트 자식 컴퍼넌트 자식이 abc라는 이름으로 1452라는 값을 넘기고 부모가 받아서 bar함수를 실행시켜 콘솔에 노출시킨다. 이 동작자체가 바뀌는건 없고 그냥 2번째 이미지처럼 명시해둘 수 있음 emits: { abc:Number } 혹시 그냥 vue에서 아예 무시를 하나 테스트하기위해 emits에 적혀진 소스를 아래와 같이 살짝 수정해봄 emits: { abcd:Number } 감지를 하긴 하네용. 따로 명시를 해 두지 않아도 emit자체는 잘 동작하기 때문에 개인이나 팀이 성격에 맞추면 될 듯 합니다. 2022. 2. 24. [vue] v-for 안에서 값이 바뀌지 않는 버그 || v-model cannot be used on v-for or v-slot scope variables because they are not writable. v-model cannot be used on v-for or v-slot scope variables because they are not writable. 업무도중 위와 같은 에러를 만났다. 사실 위 문장을 바로 마주친건 아니였고... 회사에서 quasar라는 ui 프레임워크를 사용하는데 (quasar는 vue 기반으로 사용) https://quasar.dev/ Quasar Framework - Build high-performance VueJS user interfaces in record time Developer-oriented, front-end framework with VueJS components for best-in-class high-performance, responsive webs.. 2022. 2. 21. [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 5 다음
