Vue组件通信：将RollDice的骰子计数传递给Chart组件

Hey there! Let's work through getting your dice counter data over to the Chart component, and first fix a critical bug in your existing code.

Step 1: Fix the Bug in keepRolling #

Looking at your keepRolling method, the final set of if(interval == X) checks are incorrect. The this.interval variable holds the timer ID from setTimeout, not the dice roll result. This code doesn't contribute to counting rolls and should be removed entirely. Your rollOnce method already handles incrementing the correct counter, so the cleaned-up keepRolling should look like this:

keepRolling() {
  const timeInterval = 500;
  // Clear any existing timers first to prevent duplicate roll sequences
  if (this.interval) {
    clearTimeout(this.interval);
  }
  for (let i = 0; i < 100; i++) {
    this.interval = setTimeout(this.rollOnce, i * timeInterval);
  }
}

Note: I added a check to clear existing timers before starting new ones—this prevents overlapping roll sequences if the user clicks "keep rolling" multiple times.

Step 2: Pass Counter Data to the Chart Component #

There are a few clean ways to share this data, depending on how your components are structured:

Option 1: Parent Component as Middleman (Sibling Components) #

If RollDice and Chart are sibling components (both rendered in a parent component), use Vue's event system to send data up to the parent, then pass it down to the Chart via props.

1. Update RollDice to emit counter updates:
   Add an emit at the end of your rollOnce method to send the latest counter values whenever a roll happens:

   rollOnce() {
     const rollingOnce = Math.ceil(Math.random() * 6);
     this.rolling = rollingOnce;
     if (rollingOnce == 1) this.counter1++;
     if (rollingOnce == 2) this.counter2++;
     if (rollingOnce == 3) this.counter3++;
     if (rollingOnce == 4) this.counter4++;
     if (rollingOnce == 5) this.counter5++;
     if (rollingOnce == 6) this.counter6++;
     this.totalCounter++;
   
     // Emit the counters to the parent
     this.$emit('counter-update', {
       counter1: this.counter1,
       counter2: this.counter2,
       counter3: this.counter3,
       counter4: this.counter4,
       counter5: this.counter5,
       counter6: this.counter6
     });
   }
   

2. Parent Component handles the data:
   In your parent component, capture the emitted data and pass it to the Chart:

   <template>
     <div>
       <RollDice @counter-update="updateCounters" />
       <Chart :dice-counters="currentCounters" />
     </div>
   </template>
   
   <script>
   import RollDice from './RollDice.vue';
   import Chart from './Chart.vue';
   
   export default {
     components: { RollDice, Chart },
     data() {
       return {
         currentCounters: {
           counter1: 0, counter2: 0, counter3: 0,
           counter4: 0, counter5: 0, counter6: 0
         }
       };
     },
     methods: {
       updateCounters(newCounters) {
         this.currentCounters = newCounters;
       }
     }
   };
   </script>
   

3. Chart Component accepts the props:
   Define the prop in your Chart component to use the data:

   <script>
   export default {
     name: "Chart",
     props: {
       diceCounters: {
         type: Object,
         required: true,
         default: () => ({
           counter1: 0, counter2: 0, counter3: 0,
           counter4: 0, counter5: 0, counter6: 0
         })
       }
     },
     // Use this.diceCounters.counter1, etc. to render your Y-axis
   };
   </script>
   

Option 2: Direct Prop Passing (RollDice is Parent of Chart) #

If Chart is a child component of RollDice, you can pass the counters directly as props without needing the parent middleman:

<!-- Inside RollDice's template -->
<Chart :dice-counters="{ counter1, counter2, counter3, counter4, counter5, counter6 }" />

Then define the same diceCounters prop in your Chart component as shown above.

Bonus: Simplify Your Counter Variables #

Instead of 6 separate counter variables, you can use an array to make your code cleaner and easier to maintain:

data() {
  return {
    rolling: 0,
    interval: null,
    counters: [0, 0, 0, 0, 0, 0], // Index 0 = counter1, index 1 = counter2, etc.
    totalCounter: 0
  };
},
methods: {
  rollOnce() {
    const rollResult = Math.ceil(Math.random() * 6);
    this.rolling = rollResult;
    this.counters[rollResult - 1]++; // Adjust for 0-based array index
    this.totalCounter++;
    // Emit the array instead if using this approach
    this.$emit('counter-update', this.counters);
  }
}

This makes passing data to the Chart even simpler—you can just pass the entire counters array, and the Chart can access index 0 for 1's count, index 1 for 2's count, etc.

内容的提问来源于stack exchange，提问作者S. Haider