Vue中如何获取多个相同组件属性并实现分数求和应用的结果计算？

Hey there! Let's break down how to fix your fraction sum app and answer your questions clearly.

1. 计算等式的最终结果 #

Right now, your App.vue has a hardcoded result of 213, and the fractions array just holds random numbers that aren't connected to the actual numerator/denominator values in each Fraction component. To fix this, we need to lift the state up to the parent component (App.vue) so it can track every fraction's values and calculate the total.

Step 1: Update Fraction.vue to support two-way binding #

Modify the component to accept a fraction object via props and emit updates when the user changes the inputs. This lets the parent control the data:

<template>
  <div class="fraction-input">
    <input type="number" v-model="localNumerator" />
    /
    <input type="number" v-model="localDenominator" min="1" />
    <span class="fraction-value">({{ result }})</span>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
      required: true,
      default: () => ({ numerator: 0, denominator: 1 })
    }
  },
  computed: {
    // Local computed properties for two-way binding
    localNumerator: {
      get() { return this.value.numerator; },
      set(val) {
        this.$emit('input', { ...this.value, numerator: parseInt(val) || 0 });
      }
    },
    localDenominator: {
      get() { return this.value.denominator; },
      set(val) {
        const validDenominator = parseInt(val) || 1;
        this.$emit('input', { ...this.value, denominator: validDenominator < 1 ? 1 : validDenominator });
      }
    },
    result() {
      return (this.value.numerator / this.value.denominator).toFixed(2);
    }
  }
};
</script>

Step 2: Update App.vue to manage fraction data and calculate the total #

Now, the parent will store full fraction objects, bind them to each Fraction component, and compute the total sum:

<template>
  <div class="content">
    <div class="fractions">
      <Fraction 
        v-for="(fraction, index) in fractions" 
        :key="index" 
        v-model="fractions[index]"
      >
        <span v-if="index === fractions.length - 1"> = </span>
        <span v-else>+</span>
      </Fraction>
      <div class="result">
        <span>{{ totalResult }}</span>
      </div>
    </div>
    <div class="add-fraction">
      <button @click="addFraction">Add fraction</button>
    </div>
  </div>
</template>

<script>
import Fraction from "./Fraction";
export default {
  components: { Fraction },
  data() {
    return {
      fractions: [
        { numerator: 1, denominator: 2 },
        { numerator: 3, denominator: 4 }
      ]
    };
  },
  methods: {
    addFraction() {
      if (this.fractions.length < 5) {
        this.fractions.push({
          numerator: this.getRandomInt(1, 100),
          denominator: this.getRandomInt(1, 100)
        });
      } else {
        alert("The maximum number of fractions in the expression is 5.");
      }
    },
    getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
  },
  computed: {
    totalResult() {
      // Calculate sum of all fractions
      const total = this.fractions.reduce((sum, frac) => {
        return sum + frac.numerator / frac.denominator;
      }, 0);
      return total.toFixed(2);
    }
  }
};
</script>

With this setup, every time a fraction's numerator or denominator changes, the parent's fractions array updates, and the totalResult computed property automatically recalculates the sum.

2. 访问多个相同组件的属性 #

There are two common ways to do this in Vue:

Option 1: State Lifting (Recommended) #

As we did above, let the parent component own all the data that the child components use. This way, you don't need to "access" the child components directly—you already have all their values in the parent's state. This follows Vue's one-way data flow principle and keeps your components decoupled and easy to maintain.

Option 2: Using ref (For Edge Cases) #

If you truly need to access the child component instances (e.g., to call a method or read a computed property that's not derived from props), you can use the ref attribute:

In App.vue:

<Fraction 
  v-for="(fraction, index) in fractions" 
  :key="index" 
  ref="fractionInstances"
  v-model="fractions[index]"
/>

Then, in a method or computed property, you can access the components like this:

getAllFractionResults() {
  return this.$refs.fractionInstances.map(component => component.result);
}

Note: Use this sparingly. Directly accessing child instances creates tight coupling between components, making your code harder to debug and refactor. State lifting is almost always the better approach.

内容的提问来源于stack exchange，提问作者emris