event bus & Mixin

event bus

형제끼리 통신

event bus > 이벤트를 버스를 태워서 보냄

빈 이벤트 이벤트 객체를 만들어서 이벤트 객체 통해서 컴포넌트간의 데이터를 전달하는 것

 

ex1>
bus.js

import Vue from 'vue';

export default new Vue();
//빈 이벤트 객체 

특정 vue

import bus from './utils/bus.js';
....

created(){
    bus.$emit('start:spinner');
}

App.vue

import bus from './utils/bus.js';
////
<spinner :loading = "lodingStatus"></spinner>
//////

    data(){
        return {
            lodingStatus: false,
        };
    },
    methods: {
        startSpinner(){
            this.loadingStatus = true;
        },
        endSpinner(){
             this.loadingStatus = false;
        }
    }
    created(){
        bus.$on('start:spinner', this.startSpinner);
    },
    beforeDestroy(){
         bus.$off('start:spinner', this.startSpinner);
         bus.$off('start:spinner', this.endSpinner);
    }

!! 이벤트 버스는 객체가 계속 쌓이기 때문에 off를 해주어야 한다.

 

 

ex2>

main.js

export const eventBus = new Vue()

UserEdit.vue

import { eventBus } from '../main' //main.js 에서 eventBus 불러오겠다
....

methods : {
    changeUser(){
        this.$emit('child',this.user);
        eventBus.$emit("userWasEdited",new Date());
    }
}

  npm config set msvs_version 2015 --global

UserDetail.vue

import { eventBus } from "../main"

... 
data(){
    return{
        editedDate : null;
    } 
},
created(){
    eventBus.$on('userWasEdited',(date) => {
        this.editedDate = date
    })
}

형제 컴포넌트끼지는 @로 받지 못함

eventBus > 가상의 부모 컴포넌트 역할을 함

$on으로 신호를 받게됨

eventBus 가 여러개면 한군데 두고 불러와서 사용하는 식으로 만들 수 있음 (main.js에서)

 

Mixin

재활용 로직 : 똑같은 기능 한군데 모아놓아서 한꺼번에 수정하는 방법

상태값을 데이터와 메서드로 가져왔을때 mixin으로 빼게 되면 .vue에서 믹스인으로 해당내용을 주입해서 재사용 할 수 있다.

 

새로운 폴더(mixins) 안에 > .js 파일 만들어놓는다.

변수나 함수를 불러 올 수 있음

export const dateFormat{

    methods:{
        ...
    }
}

믹스인에 있는 함수보다 자신의 컴포넌트내에 있는 함수가 더 우선순위 높음

---

mixins/ListMixin.js

export default {
  //재사용할 컴포넌트 옵션 & 로직
    created(){
        //....공통 로직
    }
}

NewsView.vue

import ListMinIn from '../mixins/ListMixin.js'
export default {
  . .... 

  mixins : [ListMixIn],
}