해결 vue bus.$emit 터치 첫 번째 $on 감청 문제 없음

2059 단어 vuebus$emit$on
$emit와emit와emit와$on의 사용
새 버스.js
import Vue from 'vue'
export const bus = new Vue()
인용 버스.js

import {bus} from './bus'

bus.$on('test', function (msg) {
 console.log(msg)
})
 
bus.$emit('test', 11)
bus.$emit 터치 첫 번째 emit 터치 첫 번째 emit 터치 첫 번째 $on 감청 불가
$emit가 $on보다 먼저 실행되었기 때문에 VUE는 감청 이벤트를 저장하지 않았기 때문에 데이터를 감청할 수 없습니다.
$emit를 호출할 때 하위 구성 요소가 생성되지 않아서 데이터를 감청할 수 없습니다. 하위 구성 요소가 생성되면 전달된 데이터를 감청할 수 있습니다.
내 해결 방법은 $emit를 호출할 때 emit를 사용할 때 $nextTick () 방법을 사용하는 것이다
사용법: 다음 DOM 업데이트 주기로 콜백 지연을 수행합니다.데이터를 수정한 후 바로 사용하고 DOM 업데이트를 기다립니다.그것은 전역적인 방법인 Vue와 같다.nextTick와 마찬가지로 다른 것은 리셋된this가 자동으로 호출된 실례에 연결되는 것입니다.

new Vue({
 // ...
 methods: {
 // ...
 example: function () {
  // DOM  
  this.$nextTick(function () {
  // DOM  
  bus.$emit('test', 11)
  })
 }
 }
})
라우팅이 여러 구성 요소에서 반복적으로 감청되지 않도록 하려면 라우팅이 전환되기 전에 현재 구성 요소 감청 이벤트를 제거하면 됩니다.

beforeDestroy () {
 //  
 this.$bus.$off('test')
 }
추가 정보: 구성 요소 간에this.$를 사용합니다.bus.$에 값을 전달하기 전에 this.$가 필요합니다.bus.$off 로그아웃 이벤트
this.$bus는 전역 변수입니다.
a, b는 두 개의 부모 구성 요소이고 c는 하위 구성 요소이다.
c 페이지 트리거 이벤트:
this.$bus.$emit(event)
a, b 페이지에서 c 구성 요소의 이벤트를 감청합니다
pagea:

this.$bus.$on(event, () => {
 this.status = 'reserve'
})
pageb:

this.$bus.$on(event, () => {
  this.status = 'buying'
})
만약 a 페이지를 호출한 후에 b 페이지를 호출하면this.status는 우리가 원하는 바이잉이 아니라reserve입니다.
올바른 쓰기 방법:
pagea:

this.$bus.$off(event).$on(event, () => {
 this.status = 'reserve'
})
pageb:

this.$bus.$off(event).$on(event, () => {
  this.status = 'buying'
})
이상 해결 vue bus.$emit가 첫 번째 $on 감청을 촉발했지만 문제가 되지 않았습니다. 편집자가 여러분에게 공유한 모든 내용을 참고해 주시고 저희를 많이 사랑해 주십시오.
Java 날짜 변환 상세 정보 및 인스턴스 코드
BOJ 16953(A ->B)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage