如何在组件之间传递状态？

Question

我有一个名为“item-detail”的组件，它上面有一个“item”支柱，如下所示：

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

然后我有一个像这样的项目视图组件：

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

我正在尝试这样做，以便当项目视图点击事件触发时，它将视图“item”prop传递给item-detail组件。所以我的onItemClick看起来像这样：

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

我无法从文档中看到如何获取v-on中的项目视图的句柄：click属性。 “this”始终等同于onItemClick方法中的Vue应用程序实例，“item”也设置为Vue应用程序实例。

基本上，用例是“单击项目视图时，将其'item'属性值传递给item-detail组件并显示item-detail组件。”

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>