VueJs 2.0의 형제 구성 요소 간의 통신

Question

vuejs 2.0 model.sync은 deprecated입니다.

그래서 형제 구성 요소간에 통신하는 적절한 방법은 vuejs 2.0입니까?

내가 뷰 2.0는 상점이나 이벤트 버스를 사용하여 형제 통신 을하는 것입니다 생각 을 잡을 수있다. evan에 따르면

: 또한 "구성 요소간에 데이터를 전달"언급 할 가치가 결국 데이터 흐름 디버깅에 매우 열심히 추적이 불가능한 및되기 때문에, 일반적으로 좋은 생각 입니다

.

여러 구성 요소가 데이터를 공유해야하는 경우 global stores 또는 Vuex을 선호합니다.

[Link to discussion]

그리고 :

.once 및 .sync는 사용되지 않습니다. 소품은 항상 단방향입니다. 부모 범위에서 부작용을 생성하려면 암시 ​​적 바인딩에 의존하지 않고 명시 적으로 emit 이벤트가 필요합니다.

• 각 store 및 event 글로벌 가시성 (난 경우에 저를 정정 있습니다

이의 때문에 나는 걱정

(그래서 그는 suggest는 $emit 및 $on을 사용하는 것입니다) 잘못된);

각 사소한 통신마다 새 저장소를 만드는 것이 좋습니다. 내가 원하는 무엇

는 범위에 형제 자매 구성 요소에 대한 어떻게 든 events 또는 stores 가시성이다. 또는 어쩌면 나는 그 생각을 포착하지 않았다.

그래서 올바른 방법으로 통신하는 방법은 무엇입니까?

Answer 1

Vue 2.0에서는 documentation에 나와있는대로 eventHub 메커니즘을 사용하고 있습니다.

1. 집중 이벤트 허브를 정의하십시오.그리고

   this.eventHub.$emit('update', data) 
   

2. 와

   const eventHub = new Vue() // Single event hub 
   
   // Distribute to components using global mixin 
   Vue.mixin({ 
       data: function() { 
        return { 
         eventHub: eventHub 
        } 
       } 
   }) 
   

3. 이제 구성 요소에 당신이 발생할 수있는 이벤트는

   this.eventHub.$on('update', data => { 
   // do your thing 
   }) 
   

Answer 2

Vue에서 정상적인 통신 패턴을 "해킹"하고 싶다면, 특별히 .sync이 더 이상 사용되지 않으므로, 구성 요소 간의 통신을 처리하는 간단한 EventEmitter를 만드는 것이 일반적입니다.당신이 다음 할 수있는이 Transmitter 목적으로

import {EventEmitter} from 'events' 

var Transmitter = Object.assign({}, EventEmitter.prototype, { /* ... */ }) 

, 어떤 구성 요소 :

import Transmitter from './Transmitter' 

var ComponentOne = Vue.extend({ 
    methods: { 
    transmit: Transmitter.emit('update') 
    } 
}) 

그리고 "수신"구성 요소를 만들 :

import Transmitter from './Transmitter' 

var ComponentTwo = Vue.extend({ 
    ready: function() { 
    Transmitter.on('update', this.doThingOnUpdate) 
    } 
}) 

을 내 최신 프로젝트 중 하나에서 다시 말하지만, 이것은 정말로 특별한 용도입니다. 전체 응용 프로그램을이 패턴으로 사용하지 마십시오. 대신 Vuex과 같은 것을 사용하십시오.

Answer 3

좋아요, 우리는 v-on 이벤트를 사용하는 학부모를 통해 형제 사이에서 통신 할 수 있습니다.

Parent 
|-List of items //sibling 1 - "List" 
|-Details of selected item //sibling 2 - "Details" 

우리가 List 일부 요소를 클릭 할 때의 우리가 Details 구성 요소를 업데이트한다고 가정하자. Parent에서

---

:

템플릿 : 여기

<list v-model="listModel" 
     v-on:select-item="setSelectedItem" 
></list> 
<details v-model="selectedModel"></details> 

:

• v-on:select-item이 List 컴포넌트에서 호출 될 이벤트가 (아래 참조) 것;
• setSelectedItemselectedModel을 업데이트하는 방법은 Parent입니다.

JS :

//... 
data() { 
    return { 
    listModel: ['a', 'b'] 
    selectedModel: null 
    } 
}, 
methods: { 
    setSelectedItem (item) { 
    this.selectedModel = item //here we change the Detail's model 
    }, 
} 
//... 

---

List 물 :

틀 :

<ul> 
    <li v-for="i in list" 
     :value="i" 
     @click="select(i, $event)"> 
     <span v-text="i"></span> 
    </li> 
</ul> 

JS :

//... 
data() { 
    return { 
    selected: null 
    } 
}, 
props: { 
    list: { 
    type: Array, 
    required: true 
    } 
}, 
methods: { 
    select (item) { 
    this.selected = item 
    this.$emit('select-item', item) // here we call the event we waiting for in "Parent" 
    }, 
} 
//... 

여기

:

• this.$emit('select-item', item) 직접 부모에 select-item를 통해 항목을 보내드립니다. 부모님께서는 Details보기로 보내 드리겠습니다.

Answer 4

을 듣는 당신은 그것을 짧게하고 rootVue을 사용할 수 있습니다 인스턴스로 전역 이벤트 허브 :

요소 1 :

this.$root.$emit('eventing', data); 

부품 2 :

mounted() { 
    this.$root.$on('eventing', data => { 
     console.log(data); 
    }); 
}