vue 2는 Bus.js를 사용하여 비부모-자식 구성 요소 통신을 구현합니다.

이 기사에서는 Bus.js를 사용하여 vue 2에서 비부모-자식 컴포넌트 통신을 구현하는 방법에 대해 설명합니다. 도움이 필요한 친구들은 참고할 수 있습니다.

이벤트를 방송하고 배포하는 $dispatch 및 $broadcast 방법은 다음과 같습니다. vue2에서 버려졌습니다. Props와 $emit()는 부모-자식 구성 요소에서 사용할 수 있습니다. 부모가 아닌 컴포넌트와 자식 컴포넌트 간의 통신을 구현하는 방법은 Vue 인스턴스 Bus를 매개체로 인스턴스화하여 서로 통신하려는 형제 컴포넌트 중 Bus를 도입한 후 호출하여 통신 및 매개변수 전달을 수행합니다. 버스 이벤트 트리거링 및 모니터링.
Bus.js는 이렇게 될 수 있습니다

import Vue from 'vue'
export default new Vue()

통신이 필요한 구성 요소에 Bus.js를 도입하세요

import Bus from '../common/js/bus.js'

버튼을 추가하고, 클릭 후 $emit 이벤트

<button @click="toBus">子组件传给兄弟组件</button>

methods

methods: {
    toBus () {
        Bus.$emit('on', '来自兄弟组件')
    }
  }

또 다른 구성 요소도 Bus.js를 가져옵니다. 후크에서

import Bus from '../common/js/bus.js'
export default {
    data() {
      return {
        message: ''
      }
    },
    mounted() {
       Bus.$on('on', (msg) => {
         this.message = msg
       })
     }
   }

함수의 on 이벤트 듣기 관련 권장 사항:

vue 2.0 및 elementUI는 이동 경로 탐색 막대 메소드 코드 구현

Vue 2.5 레벨 E 새로운 기능 공유

Vue 2.5의 TypeScript 개선

위 내용은 vue 2는 Bus.js를 사용하여 비부모-자식 구성 요소 통신을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!