Question

我有一个app.js文件，其中包含三个Vue组件和vue实例。用户在前两个组件中输入值。然后，第三个组件应该进行简单的计算并显示结果。

在下面的代码摘录中，您看到第二个部分（“成本输入”）和第三个部分（“结果输出”）。如您所见，我尝试使用第二个组件中的computed参数developmentCost，并将其用作data组件中的result-output -但这是错误的，无法正常工作，我不知道该怎么做？ 我一直在问自己：如何很难/复杂地“访问”并在同一javascript文件中的不同组件之间读取这些值？

// Revenue Input Component #1
...
// Cost Input Component #2
Vue.component('cost-input', {
  data: function () {
    return {
      durationDays: "10",
      costRate: "160",
      numberOfExperts: "1"
    }
  },
  computed: {
    developmentCost: function(e) {
      let dc = this.durationDays * this.costRate * 8 * this.numberOfExperts; 
      //return currencyFormat(c);
      //console.log(c);
      return dc;
    }
  },
  template: ...
})
// Result Output Component #3
Vue.component('result-output', {
  data: function () {
    return {
      revenuesFirst: "",
      developmentCost: ""
   }
  },
  computed: {
    calculatedProfits: function(e) {
      let cp = this.revenuesFirst - this.developmentCost; 
      //return currencyFormat(c);
      //console.log(cp);
      return cp;
    }
  },
  template: ...
})
//Vue instance
let app = new Vue({
  el: "#app",
});

有人可以帮助我理解我如何重用developmentCost的{{1}}结果并在第三部分中进行计算吗？

我读到有关“道具”，“导入”，“导出”，“ vuex”的信息，但无法将它们连接起来。所有这些示例和摆弄都是基于单独的组件文件-而在我的情况下，所有事情都发生在一个单独的Cost Input Component #2文件中。

以下是指向我的Codepen的链接：https://codepen.io/bauhausweb/project/editor/ZqnkEO 当您在左侧选择“每年的付款”时，您会发现“收入”的计算效果很好，右侧的“费用”也是如此。我要达到的目的是，底部的“利润”组件显示的是“组件1减去组件2”的结果，即收入减去成本。

感谢您的帮助，并抽出宝贵时间为一位好奇而又真正的Vue新手提供帮助

Answer 1

您可以做的是将developmentCost值存储在Vue根组件中，并将其作为prop传递给result-output组件。

然后，您将使用观察者和v-model来同步值。

Vue.component('cost-input', {
  data: function () {
    return {
      durationDays: "10",
      costRate: "160",
      numberOfExperts: "1"
    }
  },
  computed: {
    developmentCost: function(e) {
      let dc = this.durationDays * this.costRate * 8 * this.numberOfExperts; 
      //return currencyFormat(c);
      //console.log(c);
      return dc;
    }
  },
  watch: {
    developmentCost: {
      handler: function (value) {
        this.$emit("input", value);
      },
      immediate: true
    }
  },
  template: ...
})

Vue.component('result-output', {
  props: ["developmentCost"],
  data: function () {
    return {
      revenuesFirst: ""
   }
  },
  computed: {
    calculatedProfits: function(e) {
      let cp = this.revenuesFirst - this.developmentCost; 
      //return currencyFormat(c);
      //console.log(cp);
      return cp;
    }
  },
  template: ...
})

let app = new Vue({
  el: "#app",
  data: {
    developmentCost: ""
  }
});

<cost-input v-model="developmentCost"></cost-input>
...
<result-output :development-cost="developmentCost"></result-output>

v-model documentation

watchers

Here is the codepen with the updated code

如何将计算出的参数从一个Vue组件传递到另一个？

1 个答案: