Javascript 从不同的Vue组件访问返回值（“1=X，2=Y，3=X-Y”）

我对Vue.js有点陌生，正在尝试构建一个简单的计算器

我决定将应用程序分为三个部分：收入、成本和利润。 用户应该输入“收入”和“成本”，然后自动计算“利润”

控制台记录“收入”和“成本”组件的正确结果。但我如何重新使用或将其回报值传递到“利润”部分？像这样：

let calculatedProfits = revenuesFirst - developmentCost;

所有代码都在一个app.js文件中

收入输入组件如下所示：

Vue.component('revenues-input', {
  data: function () {
    return {
      licenseFee: "100",
      potentialClients: "1000"
    }
  },
  computed: {
    revenuesFirst: function(e) {
      let rFirst = this.licenseFee * this.potentialClients;
      return rFirst;
    },
  template: ...
});

成本投入部分：

// Cost Input Component
Vue.component('cost-input', {
  data: function () {
    return {
      costRate: "160",
      numberOfExperts: "1"
    }
  },
  computed: {
    developmentCost: function(e) {
      let dc = this.costRate * this.numberOfExperts; 
      return dc;
    }
  },
  template: ...
});

// Result Output Component
Vue.component('result-output', {
  data: function () {
    return {
      revenuesFirst: "",
      developmentCost: ""
   }
  },
  computed: {
    calculatedProfits: function(e) {
      let cp = this.revenuesFirst - this.developmentCost; 
      return cp;
    }
  },
  template: ...
})

我想我可能会把前两个组件中的计算变量作为最后一个组件中的数据，但这不起作用

我的结果输出组件：

// Cost Input Component
Vue.component('cost-input', {
  data: function () {
    return {
      costRate: "160",
      numberOfExperts: "1"
    }
  },
  computed: {
    developmentCost: function(e) {
      let dc = this.costRate * this.numberOfExperts; 
      return dc;
    }
  },
  template: ...
});

// Result Output Component
Vue.component('result-output', {
  data: function () {
    return {
      revenuesFirst: "",
      developmentCost: ""
   }
  },
  computed: {
    calculatedProfits: function(e) {
      let cp = this.revenuesFirst - this.developmentCost; 
      return cp;
    }
  },
  template: ...
})

最后是Vue实例：

//Vue instance
let app = new Vue({
  el: "#app",
});

---

非常感谢您的意见，非常感谢

您可以使用一个父组件来包装所有这些内容并在其中定义数据。您可以使用双向绑定在子组件和父组件之间进行通信，并使父组件成为唯一的真相来源。您也可以使用

vuex

存储，基本上您需要将所有内容发送给家长，然后再发送给孩子。这正是您希望实现Vuex的原因。感谢@Ohgodwhy和Arc的指导。不幸的是，所有这些概念对我来说都是新概念，我还不明白你提出了哪些建议。此外，我昨天还发现了一篇关于在组件之间传递变量的“道具”的有趣文章：-我想我将开始研究所有这些可能性：）