如何从另一个组件访问App.vue？ [英] How to access App.vue from another component?

问题描述

在用VueJs 2编写的应用程序中，我将以下代码插入Vue.app：

in my app written with VueJs 2, I have into the Vue.app this code:

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

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

我希望从以下位置访问属性 idfornitore

I wish to access the property idfornitore from another component, I've used:

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

或：

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

但是没有用。

预先感谢您。

推荐答案

• 使用道具在父母与孩子之间传递数据。

  • Use props to communicate data from parent to child.

    发出事件进行交流从孩子到父母

    Emit events to communicate from child to parent

    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>
    

    
    
    

    
    
    • 如果您觉得通过道具交流会导致紧密耦合，那么方便的方法是使用eventBus
    
    

    这篇关于如何从另一个组件访问App.vue？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！