vue에서 $bus의 사용과 관련된 문제에 대해 간단히 말하다

안녕하세요 여러분 주말 잘 보내세요. 요즘 프로젝트가 바빠서 제때에 업데이트를 하지 못해서 죄송합니다. 오늘 여러분께 vue를 알려드릴게요.bus.사용한 적이 있는 사람들은 모두 $bus가 형제간에 서로 값을 전달하는 프로젝트라는 것을 알고 있다. 솔직히 사용하는 곳은 많지 않지만 (모든 분야에 구덩이가 있을 것이다.)
1: $bus 파일 만들기
다음과 같은 파일 컨텐트를 만듭니다.
import Vue from 'vue'
export default new Vue();
2: $bus 도입
main.js: import Bus from './views/bus/bus';
Vue.prototype.$bus = Bus;//여기 Vue는 제가 위에 도입한 vue import Vue from'vue'입니다.
3: 전송 값 사용
this.$bus.$emit("vaPage",value);//부자간에 값을 전달하는 방법 같아요.
4: 수신

 this.$bus.$on("vaPage", v =>{ //vaPage key 
  console.log(v); //v ， 
 })

5:구덩이를 메우는 길
한 장면에서 현재 3개의 구성 요소가 각각 A(상위 구성 요소), B(하위 구성 요소), C(하위 구성 요소)라고 가정해 보세요.
이때 B, C 사이의 통신은 $bus를 사용할 수 있다. 예를 들어 내가 B에서 조작을 한 후에 자신과 C 구성 요소의dom를 새로 고치려면this.$를 통해bus.$emit(key,value); 그리고 C는this.$를 받아들입니다.bus.$on("key",v=>{});이 구성 요소 호출 방법 같은 것을 사용할 수 있습니다. 이 구성 요소를 호출할 때 초기화된 함수가 왜 얼마나 호출되는지 한 번만 썼고 페이지를 새로 고치지 않을 때가 점점 많아지고 있습니다. 이것은 우리의 생명주기 함수인 beforDestroy를 사용해서 현재 구성 요소를 삭제할 때 이 $bus를 취소하는 방법입니다. beforDestroy () {this.$bus. $off ("val")/$bus를 닫습니다}.
6: 요약
$bus를 사용할 때 bus를 받는 구성 요소에서 beforDestroy 함수에서 bus를 제거하는 것을 잊지 마십시오. 삭제하지 않으면 이 방법을 계속 중첩합니다.

beforDestroy（）{
   this.$bus.$off("vaPage"); // bus 
  }

보충 지식: vue-bus 중앙 이벤트 버스(형제 구성 요소 간 전송)
1. 역할:
비부자 구성 요소 (예를 들어 형제 구성 요소) 간에 값을 전달하는 방식은 vuex를 사용할 수도 있고 이벤트 버스를 사용할 수도 있습니다. 다음은 이벤트 버스 (vue-bus) 의 설명입니다.
2. 등록
메인js 등록

import Vue from 'vue';
import VueBus from 'vue-bus';// 
...
Vue.use(VueBus);
...

3. 사용
A 페이지는 B 페이지에 전달됩니다.
A 페이지에서 toBPage라는 이벤트를 촉발하고 파라미터'hello world!'를 전달했습니다.

...
methods: {
 toBPage(){
 this.$bus.emit('bPage', 'hello world!');
 },
}
...

B 페이지에서this.$bus.on이 bPage를 감청하고 리셋 함수this를 전송했습니다.getBPage, 이 리셋 함수의 매개 변수는 전달된 데이터입니다

created() {
 this.$bus.on('bPage', this.getBPage);
},
methods: {
 getBPage(item){
 console.log(item);//item 
 },
}

4. 이 페이지를 떠날 때 더 이상 감청할 필요가 없기 때문에 이 감청 이벤트를 삭제하려면this.$bus.off는 이 감청 사건을 제거하는 것입니다.

beforeDestroy() {
 this.$bus.off('bPage', this.getBPage);
},

이상의 이 평론 vue에서 $bus의 사용과 관련된 문제는 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.