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

Question

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

在下面的代码摘录中，您可以看到第二个组件（“成本输入”）和第三个组件（“结果输出”）。 如您所见，我尝试使用来自第二个组件的computed 参数developmentCost，并将其用作result-output 组件内的data - 但这是错误的，不起作用我不知道该怎么做？ 我一直在问自己：“访问”和跨位于同一个 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 结果（来自Cost Input Component #2）并在第三个组件中使用它进行计算？

我读到了“props”、“import”、“export”、“vuex”，但无法连接这些点。所有这些示例和小提琴都基于单独的组件文件 - 而在我的情况下，一切都发生在一个 app.js 文件中。

这是我的 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