구성 요소간에 상태를 전달하는 방법은 무엇입니까?

Question

나는 "항목을"이 "항목 - 세부 '라는 구성 요소가과 같이, 그 위에 소품 :

<item-view v-on:click="onItemClick(this)" title="head" :item="equipment.head"></item-view> 

I :

<item-detail v-ref="itemDetail" v-if="showItemDetail" v-on:clicked="showItemDetail = false"></item-detail> 

그런 다음 나는이 같은 항목 뷰 구성 요소가 항목보기 클릭 이벤트가 발생하면 해당 항목 "보기"를 항목 - 세부 구성 요소로 넘겨 주도록 항목을 구성하려고합니다. 그래서 내 onItemClick은 다음과 같습니다

onItemClick: function(item) { 
     this.$refs.itemDetail.item = item; 
     appState.showItemDetail = true; 
    } 

내가 그 V-에 내부 항목 뷰에 대한 핸들을 얻는 방법을 워드 프로세서에서 볼 수 없습니다 : 속성을 클릭합니다. "this"는 항상 onItemClick 메소드 내부의 Vue app 인스턴스와 같으며 "item"도 Vue app 인스턴스로 설정됩니다.

기본적으로 사용 사례는 "항목보기를 클릭하면 '항목'속성 값을 항목 - 세부 구성 요소에 전달하고 항목 - 세부 구성 요소를 표시합니다."

Answer 1

대화를 한 후에 나는 Vuex을 사용하는 것이 논리를 지나가는 것이 프로젝트 수명주기의 많은 스케일링 문제로 이어질 수 있다고 제안했다.

https://github.com/LiamDotPro/VuexStoreExample

이 예

쉽게 직접 관계 또는 체인없이 구성 요소 사이의 논리를 전달하는 저장소를 사용하는 방법을 보여줍니다.

store

/* eslint-disable space-before-function-paren */ 
import Vue from 'vue' 
import Vuex from 'vuex' 

Vue.use(Vuex) 

const state = { 
    titleText: "hmm.." 
} 

const actions = { 
    changeHomeText: ({commit}, context) => { 
    commit('UPDATE_TEXT', context) 
    } 
} 

const mutations = { 
    UPDATE_TEXT(state, text) { 
    state.titleText = text 
    } 
} 

const getters = {} 

export default new Vuex.Store({ 
    strict: true, 
    state, 
    getters, 
    actions, 
    mutations 
}) 

app

<template> 
    <div id="app"> 
    <router-view/> 
    <div> 
     <h1>{{getTitle}}</h1> 
    </div> 
    </div> 


</template> 

<script> 
    export default { 
    name: 'app', 
    data() { 
     return { 
     msg: '', 
     } 
    }, 
    computed: { 
     getTitle: function() { 
     return this.$store.state.titleText; 
     } 
    } 
    } 
</script> 

<style> 
    #app { 
    font-family: 'Avenir', Helvetica, Arial, sans-serif; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    text-align: center; 
    color: #2c3e50; 
    margin-top: 60px; 
    } 
</style> 

Inner component

<template> 
    <div class="innerTile"> 
    <h1>Inner Tile</h1> 
    <button @click="ChangeTileText()">inner tile button..</button> 
    </div> 
</template> 

<script> 
    export default { 
    name: '', 
    data() { 
     return { 
     msg: '', 
     } 
    }, 
    methods: { 
     ChangeTileText: function() { 
     this.$store.dispatch("changeHomeText", "Hi from inner tile.."); 
     } 
    } 
    } 
</script> 

<style scoped> 
</style>