Vue 형제 간에 데이터 전달

Vue 형제 간에 데이터 전달

이 질문에 대해 자세히 알아보고 형제간 통신을 위해 버스 방식을 구현한 후 웹 팩 오류가 발생하여 올바르게 구현되지 않았거나(어제 최신 CLI 사용), 다른 방법이 필요합니다.

저는 React에서 온 Vue를 처음 접하며 2개의 컴포넌트를 패키지로 묶은 간단한 앱을 구축했습니다.app.vue:

데이터를 전송하는 입력:

<GoogleInput @searchEvent="getSearchLocation($event)"></GoogleInput>

및 데이터를 수신해야 하는 지도 컨테이너:

<GoogleMapsContainer :location="location" name="location-project"></GoogleMapsContainer>

아이를 성공적으로 구현했습니다.GoogleInput)의 부모 통신에 대해서app.js경유:

getSearchLocation(input) {
  this.location = input;
}

에 있어서의 방법으로GoogleInput:

this.$emit('searchEvent', ev.target.value);

여기까지는 모든 것이 순조로웠다.

---

그러나 입력값을 형제에게 전달하려고 할 때(GoogleMapsContainer)을(를) 경유합니다.

입력 색인.js:const Bus = new Vue({});

송신 컴포넌트의 새로운 송신:

Bus.$emit('passLocation', {location: this.location})

수신 컴포넌트:

Bus.$on('passLocation', (input) => { this.location = input; });

Web pack 에러가 표시된다.

Error in created hook: "TypeError: __WEBPACK_IMPORTED_MODULE_1_vue__.$on is not a function"

웹 팩 문제(웹 팩 문제 또는 손가락이 작은 실수)를 해결하지 않고 지도 컨테이너에 대한 입력 정보를 전달할 수 있는 "최단 거리"를 찾고 있습니다.

BTW: vuex가 (React-Redux와 같이) 구현에 시간이 걸리지 않는 방법이라면 그것도 멋진 방법이지만, 이 디자인(이미 Git에)을 유지해야 합니다.

감사해요.

Import 에러가 발생했을 가능성이 있습니다.

index.js에서 다음과 같이 내보냅니다.

export const Bus = new Vue({});

그리고 당신이 하는 파일에는Bus.$emit(...)또는Bus.$on(...)다음과 같이 Import합니다.

import { Bus } from './index'; // make sure you use the correct relative path

언급URL : https://stackoverflow.com/questions/49988433/passing-data-between-vue-siblings