如何从另一个组件访问 App.vue？答案

【问题标题】：How to access App.vue from another component?如何从另一个组件访问 App.vue？
【发布时间】：2018-06-27 10:02:36
【问题描述】：

在我用 VueJs 2 编写的应用程序中，我将这段代码放入 Vue.app：

export default {
  name: 'app',
  data () {
    return {
      title: 'Gestione fornitori',
      idfornitore: ''
    }
  },

  methods: {
    loadFunction (route) {
      this.$router.push(route)
    }
  }
}
</script>

我希望从另一个组件访问属性idfornitore，我使用过：

    mounted () {
      this.$parent.idfornitore = ''
    },

也可以：

    mounted () {
      var Vue = require('vue')
      Vue.app.idfornitore = ''
    },

但它没有奏效。从另一个组件访问属性的正确方法是什么？

提前谢谢你。

【问题讨论】：

标签： vue.js vuejs2 components vue-component

【解决方案1】：

使用 props 在父子之间传递数据。
发送事件以在子节点与父节点之间进行通信

Parent.vue

    <template>
      <div>
         <h2>Parent: {{idfornitore}}</h2>
         <child :idfornitore="idfornitore" @changevalue="idfornitore = $event"></child>
         //idfornitore - data sent to child from parent.
         //changevalue - event emitted from child and received by parent
      </div>
    </template>

    <script>
    import Child from './compname.vue';

    export default {
        components:{
            "child" : Child
        },
        data(){
            return {
                idfornitore : "34"
            }
        }
    }
    </script>

Child.vue

<template>
  <div>
    Child: {{idfornitore}}
    <button @click="add()">Add</button>
  </div>
</template>
<script>
export default {
       props:["idfornitore"],
       methods : {
           add(){
               this.idfornitore++; // mutating props directly will result in vuejs warning. i have used this code here to show how this works.
               this.$emit("changevalue",this.idfornitore); //cascade the update to parent
           }
       }
    }
</script>

如果您觉得通过 props 进行通信会导致紧密耦合，那么更方便的方法是使用 eventBus

【讨论】：

当有多个孩子并将数据从最后一个孩子发送到根主父母时，它会有点复杂。解决方案是什么？我用 Vuex 解决了这个问题。
如果项目很小，vuebus 会很好，正如我在上一点中提到的，vuex 对于小型项目来说将是一个矫枉过正。
@Rahul 使用道具进行交流将是开发 UI 组件（如 carousal、popup）的最佳方法
谢谢，你的代码很详细，我已经明白怎么操作了。

【解决方案2】：

组件之间的通信通过props 或events 完成。

如果您要访问的组件数据有子关系，您可以使用props。但在您的情况下，您需要更改父数据。为此，您可以发出events。如果组件（您希望更新）是当前组件的直接父级，则事件将是干净的解决方案。

如果不是这样，请使用 EventBus 模式。使用此模式，您可以从任何组件发出事件并在任何其他组件中监听它们并相应地应用更改。

https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication https://alligator.io/vuejs/global-event-bus/

如果需要更频繁地在组件之间进行通信，EventBus 模式将产生非常脏的代码，并使调试变得非常困难。

要处理多个组件之间的共享状态，强烈建议使用vuex。它使您的应用程序状态易于管理和维护。我相信每个现实世界的 Vue 应用程序都需要状态管理，这可以通过vuex（或其他类似工具）轻松实现，我建议您这样做。

https://vuejs.org/v2/guide/state-management.html

https://vuex.vuejs.org/en/intro.html

【讨论】：