使用VueJS Cli应该如何使所有页面共有一个变量并能够在页面中观看它

问题描述 投票:0回答:1

我对VueJs来说还比较陌生,我被困在一个项目上,无法在线找到解决方案。

我想在所有页面(月)上使用一个变量,并且当该变量更改时,我希望能够在页面上执行某些操作。

我想做的事(简化)

在App.vue中

<div id="app">
    <div id="topBar">
      <div id="nav">
        <div><router-link to="/">Home</router-link></div>
        <div><router-link to="/expenses">Dépenses</router-link></div>
        <div><router-link to="/revenues">Revenus</router-link></div>
        <div><router-link to="/category">Categories</router-link></div>
      </div>
    </div>
    <select name="selectMonth" v-model="month" id="selectMonth" required>
        <option v-for="(month, index) in months" :key="index" :value=month>{{ month }}</option>
    </select>
    <router-view/>
  </div>

在Home.vue或任何其他页面中

watch: {
    month: function () {
      this.getExpenses() // or something else (In this case I want to fetch data again with a new month)
    }
  },

但是由于变量在app.vue上已更改,(无论我在哪个页面上,我都无法在页面上观看它。

你知道我应该怎么做?这种东西的最佳做法是什么?

先谢谢您能帮助我!

javascript vue.js command-line-interface
1个回答
0
投票

基于组件的UI框架(如Vue,React和朋友)实施了将数据向下传递到组件(Vue中的Props)的想法,但不允许这些组件通过简单地更改数据将对数据的更新传递给父级。相反,可以通过事件或使用诸如Vuex之类的状态管理器来传递对数据的更新。如果您正在寻找一种简单的方法来实现此目的,请查看$.emithttps://vuejs.org/v2/api/#vm-emit

© www.soinside.com 2019 - 2024. All rights reserved.