Javascript 有没有办法访问页面上几个相同组件的属性？

我刚刚开始掌握Vue，决定做一个小应用程序来计算分数之和。 我有两个组件：Fraction.vue和App.vue。App.vue包含多个分数组件

Fraction.vue代码：

export default {
  data() {
    return {
      numerator: 0,
      denominator: 1
    };
  },
  computed: {
    result() {
      return (this.numerator / this.denominator).toFixed(2);
    }
  }
};

 <template>
  <div class="content">
    <div class="fractions">
      <Fraction v-for="fraction in fractions" :key="fraction">
        <span v-if="fractions.indexOf(fraction) === fractions.length - 1">
          =
        </span>
        <span v-else>+</span>
      </Fraction>
      <div class="result">
        <span>{{ result }}</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: Fraction
  },
  data() {
    return {
      fractions: [1, 2]
    };
  },
  methods: {
    addFraction() {
      if (this.fractions.length !== 5) {
        this.fractions.push(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)) + min;
    }
  },
  computed: {
    result() {
      return 213;
    }
  }
};
</script>

App.vue代码：

export default {
  data() {
    return {
      numerator: 0,
      denominator: 1
    };
  },
  computed: {
    result() {
      return (this.numerator / this.denominator).toFixed(2);
    }
  }
};

 <template>
  <div class="content">
    <div class="fractions">
      <Fraction v-for="fraction in fractions" :key="fraction">
        <span v-if="fractions.indexOf(fraction) === fractions.length - 1">
          =
        </span>
        <span v-else>+</span>
      </Fraction>
      <div class="result">
        <span>{{ result }}</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: Fraction
  },
  data() {
    return {
      fractions: [1, 2]
    };
  },
  methods: {
    addFraction() {
      if (this.fractions.length !== 5) {
        this.fractions.push(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)) + min;
    }
  },
  computed: {
    result() {
      return 213;
    }
  }
};
</script>

=
+
{{result}}
加分数
从“/”导入分数；
导出默认值{
组成部分：{
分数：分数
},
数据（）{
返回{
分数：[1,2]
};
},
方法：{
添加分数（）{
if（this.partitions.length！==5）{
this.fractions.push（this.getRandomInt（1100））；
}否则{
警报（“表达式中分数的最大数目为5”）；
}
},
getRandomInt（最小值、最大值）{
min=数学单元（min）；
最大值=数学楼层（最大值）；
返回Math.floor（Math.random（）*（max-min））+min；
}
},
计算：{
结果（）{
返回213；
}
}
};

---

我不知道如何得到方程的最终结果。

您这里的问题是一个问题，您还不太了解vue是如何工作的。本着多学代码少解释的精神。我简化了你的例子，这样你就明白我的意思了

分数vue

//You can render information in your components
//Every component you make can have its own template
<template>
  <div>
    {{ result }}
  </div>

</template>
export default {
  props: {
    numerator: Number,
    denominator: Number
  },
  computed: {
    result() {
      return (this.numerator / this.denominator).toFixed(2);
    }
  }
};

//您可以在组件中呈现信息
//您制作的每个组件都可以有自己的模板
{{result}}
导出默认值{
道具：{
分子：数字，
分母：数字
},
计算：{
结果（）{
返回（此分子/此分母）.toFixed（2）；
}
}
};

App.vue

<template>
  <div class="content">
    <div class="fractions">
      //<!-- See here this is the easiest way to pass values to a component -->
      <Fraction 
        v-for="(fraction, index) in fractions" 
        :key="index" 
        :numerator="fraction.numerator"
        :denominator="fraction.denominator"/>
    </div>
  </div>
</template>

<script>
import Fraction from "./Fraction";
export default {
  components: {
    Fraction: Fraction
  },
  data() {
    return {
      //Arrays can have nested objects, and this objects can be anonymous
      fractions: [
        {
          numerator: 1,
          denominator: 2
        },
        {
          numerator: 2,
          denominator: 1
        },  
      ]
    };
  },
};
</script>

//
从“/”导入分数；
导出默认值{
组成部分：{
分数：分数
},
数据（）{
返回{
//数组可以有嵌套对象，这些对象可以是匿名的
分数：[
{
分子：1，
分母：2
},
{
分子：2，
分母：1
},  
]
};
},
};

---

如果您想要的是一段可重用的代码，那么组件的做法是错误的，在这种情况下，您应该使用mixin。

您这里的问题很严重，您还不太了解vue是如何工作的。本着多学代码少解释的精神。我简化了你的例子，这样你就明白我的意思了

分数vue

//You can render information in your components
//Every component you make can have its own template
<template>
  <div>
    {{ result }}
  </div>

</template>
export default {
  props: {
    numerator: Number,
    denominator: Number
  },
  computed: {
    result() {
      return (this.numerator / this.denominator).toFixed(2);
    }
  }
};

//您可以在组件中呈现信息
//您制作的每个组件都可以有自己的模板
{{result}}
导出默认值{
道具：{
分子：数字，
分母：数字
},
计算：{
结果（）{
返回（此分子/此分母）.toFixed（2）；
}
}
};

App.vue

<template>
  <div class="content">
    <div class="fractions">
      //<!-- See here this is the easiest way to pass values to a component -->
      <Fraction 
        v-for="(fraction, index) in fractions" 
        :key="index" 
        :numerator="fraction.numerator"
        :denominator="fraction.denominator"/>
    </div>
  </div>
</template>

<script>
import Fraction from "./Fraction";
export default {
  components: {
    Fraction: Fraction
  },
  data() {
    return {
      //Arrays can have nested objects, and this objects can be anonymous
      fractions: [
        {
          numerator: 1,
          denominator: 2
        },
        {
          numerator: 2,
          denominator: 1
        },  
      ]
    };
  },
};
</script>

//
从“/”导入分数；
导出默认值{
组成部分：{
分数：分数
},
数据（）{
返回{
//数组可以有嵌套对象，这些对象可以是匿名的
分数：[
{
分子：1，
分母：2
},
{
分子：2，
分母：1
},  
]
};
},
};

---

如果您想要的是一段可重用的代码，那么组件是错误的做法，在这种情况下，您应该使用mixin。

不确定您在这里想要实现什么。但是您应该在模板中包含

，并且内部跨度必须位于

分数的模板中。否则，您必须使用
插槽
。您是否试图获取
分数
的计算
结果
，以显示在
应用程序
中？我认为最好的方法是在
App
s数据钩子中创建
result
，并使用
v-bind将其传递到
Fraction
，但不确定您在这里试图实现什么。但是您应该在模板中包含
，并且内部跨度必须位于
分数的模板中。否则，您必须使用
插槽
。您是否试图获取
分数
的计算
结果
，以显示在
应用程序
中？我认为最好的方法是在
App
s数据钩子中创建
result
，并使用
v-bind将其传递到
Fraction