Vue.js 동적 구성 요소 - 데이터 전달

Question

Vue.js를 처음 사용했습니다. 여기에있는 튜토리얼 (https://coligo.io/dynamic-components-in-vuejs/)을 따라 동적 구성 요소를 사용하여 내가 좋아하는 동적 레이아웃을 제공하고 제품을 나열하고 사용자가 테이블의 제품 중 하나를 클릭 할 때 편집보기로 전환 할 수있게했습니다. 따라서 '목록 제품'구성 요소와 '편집 제품'구성 요소가 있으며 표시되는 것은 Vue 인스턴스의 'currentView'상태에 따라 다릅니다.

<div id="content"> 
    <keep-alive> 
    <component :is="currentView"></component> 
    </keep-alive> 
</div> 

currentView가 변경되면 전환이 모두 정상적으로 작동합니다. 내가 알아 내지 못한 것은 제품 정보를 편집 구성 요소에 전달하여 데이터로 끝내는 것이 가장 좋습니다. 목록 및 편집 구성 요소가 동시에 인스턴스화 된 기본 Vue 인스턴스의 두 형제 구성 요소라고 가정합니다. 내가해야 할 일은 목록 테이블에서 행을 클릭하고 해당 행을 작성하는 데 사용 된 제품 객체를 편집 구성 요소에서 사용할 수있게하는 것입니다. 나는 내가 어떻게하는지 (적어도 적당한 Vue 방법으로) 확신하지 않는다. 표시된 컴포넌트가 ('currentView'의 변경을 통해) 전환 될 때 새로 표시된 (다시) 표시된 컴포넌트에 대해 호출되는 이벤트가 있습니까? 그렇다면 아마도 일부 기능을 호출 할 수 있습니까?

나중에 : 어떻게 든 사용할 수 있어야한다고 생각하는 편집 제품 구성 요소로 전환하면 '활성화 된'후크가 호출되는 것으로 확인되었습니다. 이제 그 점을 이해하십시오.

Answer 1

Vuex을 사용할 수 있습니다. Vuex는 Vue를위한 Flux 영감 상태 관리 라이브러리입니다.

응용 프로그램에는 기본적으로 (1) 선택된 제품 없음 (list-products 구성 요소) 및 (2) 선택된 제품 (edit-product)의 두 가지 상태가 있습니다. 이것이 Vuex로 모델링 될 때, 아이디어는 현재 선택된 제품을 소위 가게에 보관하고, 상점 상태에 따라 구성 요소가 내부 상태를 파악하도록하는 것입니다. 당신의 list-products 구성 요소에

const store = new Vuex.Store({ 
    state: { 
     selectedProduct: null 
    }, 
    getters: { 
     selectedProduct: state => state.selectedProduct 
    }, 
    mutations: { 
     selectProduct: (state, data) => state.selectedProduct = data 
    } 
}); 

핸들 제품 선택 :

응용 프로그램의 상태를 유지하는 저장소를 만듭니다

methods: { 
    selectProduct(product) { 
     this.$store.commit('selectProduct', product); 
    } 
} 

표시 현재 제품을 edit-product에 :

Vue.component('edit-product', { 
    store, 
    template: '<div>{{selectedProduct.name}}</div>', 
    computed: Vuex.mapGetters(['selectedProduct']) 
}); 

다음은 예입니다

마지막으로 구성 요소를 전환합니다. 상태에 따라 달라지기 :

new Vue({ 
    el: '#app', 
    store, 
    computed: Object.assign(Vuex.mapGetters(['selectedProduct']), { 
     currentView() { 
      return this.selectedProduct ? 'edit-product' : 'list-products' 
     } 
    }) 
}); 

다음은 기본적인 작업입니다 JSFiddle입니다.