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

Question

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

4

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

在下面的代码片段中，您可以看到第二个组件（“cost-input”）和第三个组件（“result-output”）。正如你所看到的, 我尝试使用第二个组件中的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",
});

有人能帮我理解如何重复使用“开发成本”（来自“成本输入组件#2”的结果）并在第三个组件中进行计算吗？

我了解“props”，“import”，“export”和“vuex”，但无法将它们联系起来。所有这些示例和小部件都基于单独的组件文件，而在我的情况下，一切都发生在一个名为“app.js”的文件中。

这是我的Codepen链接：https://codepen.io/bauhausweb/project/editor/ZqnkEO。当您在左侧选择“每年付款”时，您会看到“收入”很好地计算出来，右侧的“成本”也是如此。我想做的就是底部的“利润”组件显示“组件1减去组件2”的结果，即收入减去成本。

感谢您的帮助和抽出时间来协助一个好奇但真正的Vue新手。

- bauhausweb

1

你可以使用 props、mixins、vuex 来实现。选择你所需的。 - Daniyal Lukmanov

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pierre Said · Accepted Answer

你可以将developmentCost的值存储在Vue根组件中，并将其作为prop传递给result-output组件。然后使用watcher和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文档

观察者(watchers)

这是更新后的代码的CodePen链接