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

Question

I have one app.js file which inlcudes three Vue components and the vue instance. In the first two components the user puts in values. The third component then is supposed to make a simple calculation and display the result.

In the code excerpt below you see the second component ("cost-input") and the third component ("result-output"). As you can see, I try to use the computed parameter developmentCost , from the second component, and use it as data inside the result-output component - but that's wrong, not working and I'm clueless how to do that? I keep asking myself: How can it be so hard/complicated to "access" and read these values across different components which sit within the very same javascript file???

// 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",
});

Can someone help me understand how I re-use the developmentCost result (from the Cost Input Component #2 ) and calculate with it in the third component?

I read about "props", "import", "export", "vuex" but can't connect the dots. All those examples and fiddles out there are based on separate component files - whereas in my case everything happens inside one single app.js file.

Here is a link to my Codepen: https://codepen.io/bauhausweb/project/editor/ZqnkEO When you select the "Payments per Year" on the left side, you will see that the "Revenues" calculate nicely, and so does the "Cost" on the right side. All I'm trying to achieve is that the "Profits" component at the bottom displays the results from "component #1 minus component #2", Revenues minus Cost.

I appreciate your help and taking the time to assist a curious but true Vue newbie

Answer 1

What you could do is store the developmentCost value in the Vue root component and pass it down as a prop to the result-output component.

You would then use a watcher and v-model to synchronise the value.

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