时间戳

首页 > 解决方案 > 有没有办法访问页面上几个相同组件的属性？

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

问题描述

我刚刚开始掌握 Vue，并决定制作一个小应用程序来计算分数的总和。我有两个组件：Fraction.vue 和 App.vue。App.vue 包含几个 Fraction 组件。

Fraction.vue 代码：

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

App.vue 代码：

 <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>

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

标签： javascriptvue.js

解决方案

你的问题是有问题的，你还不太明白 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);
    }
  }
};

应用程序.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>

如果您想要拥有一段可重用的代码组件是错误的做法，那么您应该使用 mixin。

推荐阅读