Vue
-
slot-scope(v-slot)Vue 2023. 3. 10. 13:52
slot-scope 는 뭐야? 슬롯(slot)이 컴포넌트 템플릿의 재사용성을 늘려주기 위한 기능이라면 스콥드 슬롯(Scoped slot)은 컴포넌트 데이터의 재사용성을 높여주는 기능입니다. 일반적으로 뷰에서는 프롭스 속성이나 이벤트 발생과 같은 컴포넌트 통신 방식을 제외하고는 다른 컴포넌트의 값을 참조할 수 없습니다. 하지만 스콥드 슬롯은 하위 컴포넌트의 값을 상위 컴포넌트에서 접근하여 사용할 수 있습니다. (참조: 장기효님) {{ 임의의 변수 }} Example 설명 slot 안에 있는 자식 컴포넌트의 이벤트 값을 받아서 부모 컴포넌트의 값을 바꿔줘야 했다. 자식 컴포넌트(Mdi.vue)에서 slot-scope에 hiddenActive 함수를 참조 할 수 있게 넣어줬다. 부모 컴포넌트에서는 자식 컴포넌..
-
Vuex 기술 요소Vue 2022. 10. 27. 14:00
Vuex 기술 요소 state: 여러 컴포넌트에 공유되는 데이터 (data) getters: 연산된 state 값을 접근하는 속성 (computed) mutations: state 값을 변경하는 이벤트 로직/메서드 (methods) state는 왜 직접 변경하지 않고 mutations로 변경할까? - 여러 개의 컴포넌트에서 아래와 같이 state 값을 변경하는 경우 어느 컴포넌트에서 해당 state를 변경했는지 추적하기 어렵다. - 특정 시점에 어떤 컴포넌트가 state를 접근하여 변경한 건지 확인하기 어렵기 때문 - 따라서, 뷰의 반응성을 거스르지 않게 명시적으로 상태 변화를 수행, 반응성, 디버깅, 테스팅 혜택. actions: 비동기 처리 로직을 선언하는 메서드 (async methods)