vue.js - 如何在组件之间传递状态？

Question

我有一个名为“item-detail”的组件，上面有一个“item” Prop ，如下所示:

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

然后我有一个像这样的项目 View 组件:

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

我试图做到这一点，以便在项目 View 点击事件触发时，它会将 View “项目” Prop 传递给项目详细信息组件。所以我的 onItemClick 看起来像这样:

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

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

基本上，用例是“单击项目 View 时，将其‘项目’属性值传递给项目详细信息组件并显示项目详细信息组件。”。

Answer 1

在交谈之后，我建议使用 Vuex 比将逻辑向上传递链更合适，这可能会在项目生命周期的后期导致大量扩展问题。

https://github.com/LiamDotPro/VuexStoreExample

此示例展示了如何使用商店在没有直接关系或链接的情况下轻松地在组件之间传递逻辑。

商店

/* 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
})

应用

<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>

内部组件

<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>