한 Vue 구성 요소에서 다른 Vue 구성 요소로 계산된 매개 변수를 전달하는 방법

한 Vue 구성 요소에서 다른 Vue 구성 요소로 계산된 매개 변수를 전달하는 방법

하나 있어.app.js세 개의 Vue 구성 요소와 vue 인스턴스를 포함하는 파일.처음 두 구성 요소에서 사용자는 값을 입력한다.세 번째 구성 요소는 간단한 계산을 하고 결과를 표시하도록 되어 있다.

아래 발췌한 코드에서 두 번째 구성요소("비용 입력")와 세 번째 구성요소("결과 출력")를 볼 수 있다.보시다시피, 나는 두 번째 구성 요소에서 나온 파라미터를 사용하여 구성 요소 내부로 사용하려고 하지만, 그것은 잘못된 것이며, 작동하지 않고 어떻게 해야 할지 모르겠다.나는 계속 자문한다: 동일한 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)를 세 번째 구성요소로 계산하시겠습니까?

나는 "프로포즈", "수입", "수출", "vuex"에 대해 읽었지만 점을 연결할 수 없다.이러한 모든 예와 안절부절못은 별도의 구성 요소 파일을 기반으로 하지만, 내 경우에는 모든 것이 하나의 구성 요소 내에서 이루어진다.app.js파일

여기 내 코드펜에 대한 링크가 있다: https://codepen.io/bauhausweb/project/editor/ZqnkEO 왼쪽의 "연간 지불"을 선택하면 "수익"이 잘 계산되고 오른쪽의 "비용"도 잘 계산된다는 것을 알 수 있다.내가 달성하고자 하는 것은 하단의 "이익" 구성요소가 "구성요소 #1 - 구성요소 #2", "수익 - 비용"의 결과를 표시한다는 것이다.

나는 너의 도움에 감사하고 호기심 많으나 진실된 Vue 신입생을 위해 시간을 내주었다.

당신이 할 수 있는 일은 그 물건을 보관하는 것이다.developmentCostVue 루트 구성 요소의 값 및 이를 다음과 같이 전달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문서화

감시자

업데이트된 코드가 포함된 코드 페이지

참조URL: https://stackoverflow.com/questions/59284686/how-to-pass-a-computed-parameter-from-one-vue-component-to-another