コンポーネント間で状態を渡す方法は？

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アプリインスタンスに相当し、「item」もVueアプリインスタンスに設定されます。

基本的にユースケースは「アイテムビューをクリックすると、そのアイテムのプロパティ値をアイテムディテールコンポーネントに渡し、アイテムディテールコンポーネントを表示します。」

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>