eventBus 간단 정리

event bus빈 이벤트 객체를 통해 컴포넌트간 데이터를 전달하는 것 부모, 자식이 아니라도 형제끼리 통신할 수 있다. event bus 메서드$emit() : 이벤트(데이터) 전송 $on() : 이벤트(데이터) 수신 $off() : 이벤트(데이터) 삭제 만들면서 이해해보자 우선 빈 Vue 인스턴스 객체를 생성한다// bus.js import Vue from 'vue'; // 텅 빈 이벤트 객체 export default new Vue(); 정말 텅 빈 객체. 그저 컴포넌트간 데이터를 전달하는 역할만 한다. 이제 이벤트를 보내보자 이벤트 받아랏 A B 데이터를 보내고자하는 컴포넌트에서 $emit을 활용하여 이벤트를 전송한다. aEvent, bEvent를 발생 bus.$emit('aEvent'); bus..

• format_list_bulleted 🧠 저장/Vue
• · 2023. 12. 31.
• textsms

slot 초간단 활용 (name 속성 활용)

slot 특정한 컴포넌트의 일부 UI를 재사용하는 것. slot을 활용한다는 건 간단하게 말해서 … 자식에서 slot을 정의, 부모에서 slot을 삽입! 만들면서 이해해보자 // 하위 컴포넌트 슬롯컴포넌트 정의되지않음 하위 컴포넌트에서는 각각 A, B, empty 라는 name의 slot을 정의하였고 현재는 아무것도 없는 텅텅 빈 상태 // 상위 컴포넌트 A B로 이동 그리고 부모 컴포넌트에서 slot 속성에 name을 지정하여 해당 name에 맞는 slot에 각각 삽입하면 끝 template과 rotuer-link를 삽입하였다. 컴포넌트 삽입도 가능하다.

• format_list_bulleted 🧠 저장/Vue
• · 2023. 12. 28.
• textsms

공통 컴포넌트 간단 활용

vue에서 공통 컴포넌트를 사용해보자 공통 컴포넌트란? 서로 다른 부분에서 반복적인 부분을 한 컴포넌트로 사용하는 것 공통 컴포넌트를 만들어보자 일단 아래처럼 서로 비슷하지만 다른 두 컴포넌트 router가 등록되어 있다. // routes/index.js export const router = new VueRouter({ routes: [ { path: '/one', name: 'one', component: OneView, }, { path: '/two', name: 'two', component: TwoView, }, ] }) 그리고 두 컴포넌트 모두 내부적으로 공통 컴포넌트를 가져다가 쓰고있음 // OneView.vue // TwoView.vue 비슷한 view들은 공통 컴포넌트를 그저 가져다 쓸..

• format_list_bulleted 🧠 저장/Vue
• · 2023. 12. 25.
• textsms

Helper 간단 정리 (vuex를 더 편하게!)

Helper vuex의 각 속성들을 더 쉽게 사용하는 방법 state → mapState getters → mapGetters mutations → mapMutations actions → mapActions Helper 사용법 Helper 없이 state의 데이터를 가져오려면 이런식으로 가져왔어야했따 {{ this.$store.state.num }} 이게 여러개일때 넘 불편하니까 Helper을 활용하자..! 일단 가져와야한다. import { mapState, mapGetters, ... } from 'vuex' 이런식으로 ... export default { computed() { ...mapState(['num']), ...mapGetters(['countedNum']) }, methods: { ...

• format_list_bulleted 🧠 저장/Vue
• · 2023. 12. 22.
• textsms

vuex 활용 비교

vuex 비교 vuex 없이 데이터를 호출해보자 1. api 등록 api는 요로코롬 해커뉴스 api를 활용 import axios from 'axios'; // 1. HTTP Request와 Response와 관련된 기본 설정을 따로 const config = { baseUrl: 'https://api.hnpwa.com/v0/' }; // 2. API 함수들을 정리 function fetchList() { return axios.get(`${config.baseUrl}news/1.json`); } export { fetchList, } 2. view에서 created시 등록한 api를 냅다 호출하고 뿌림 vuex 안씀 {{ item.user }} 끝 vuex 활용하여 데이터를 호출해보자 1. api 등록..

• format_list_bulleted 🧠 저장/Vue
• · 2023. 12. 19.
• textsms