vuejs 구성 요소 통신 이벤트 허브 (버스)

이벤트 허브 는 제 가 이해 하기 로 는 vuex 같 아 요.
이벤트 허브 가 뭐 예요?
하지만 또 축소판 으로 거지 판 이 라 고 할 수 있다. 그 가 조작 하 는 것 이 많 지 않 기 때문이다.
그러나 구성 요소 간 의 통신 으로 충분 합 니 다. vuex 를 사용 하면 vuex 를 인용 할 수 밖 에 없 기 때 문 입 니 다.
그리고 당신 은 많은 배 치 를 해 야 하기 때문에 대형 이나 중형 프로젝트 에서 처리 하기에 매우 편리 합 니 다.
그러나 한두 개의 구성 요소 간 에 데 이 터 를 전달 하거나 구성 요소 가 비교적 적은 상황 에서 이렇게 조작 하려 면 예비 방안 이 필요 하 다.
 
이벤트 허브 는 어떻게 사용 합 니까?
1. 외부 js 참조 라면 이렇게 쓸 수 있 습 니 다.
 

// event-bus.js
//         
var eventHub = new Vue()
export default eventHub


//    



import Subscriber from './components/Subscriber'   //        ，      
import eventHub from './js/event-bus'              //        ，        
export default {
   methods:{
        find(){
          eventHub.$emit('delete-todo', 'hello')
            //            
            //            
        }
    }
}






//   1  
// components  ：Subscriber 




  export default {
    created(){
       eventHub.$on('delete-todo',backing )
        //        
       //           
       //              
    },
     methods:{
        backing(site){
         console.log(site)
        }
    }
}





//     「  」  
//   ： hello

이것 은 그 를 js 인용 으로 독립 시 키 는 것 입 니 다. 사용 할 때마다 구성 요소 에서 정 의 를 내리 지 않 으 려 면 어떻게 해 야 합 니까?
 
1. 입구 파일 에서 참조
 
비계 도 구 를 사용한다 고 가정 하면 파일 이름 은 main. js 입 니 다.

import Vue from 'vue'
import App from './App'


//          
Vue.prototype.$eventHub= Vue.prototype.$eventHub ||  new Vue()        //   

new Vue({
  el: '#app',
  template: '',
  components: {App},
  data: {
    eventHub: new Vue()
  }
})

구성 요소 부분:
홈 페이지: HelloWorld.vue

import back from "@/components/Background";
export default {
  name: "HelloWorld",
  methods: {
    go() {
      this.$eventHub.$emit("add-todo", "  ");
    }
  },
  components: {
    back
  }
};

 
구성 요소 참조:

export default {
  data() {
    return {
      bb: "     "
    };
  },
  created() {
    this.$eventHub.$on("add-todo", this.move);
    //               
  },
  methods: {
    move(ab) {
      console.log("  ");
      console.log(ab);
      console.log("      ");
    }
  }
};

 
최종 인쇄: