<p>Saya perlu memanggil kaedah komponen anak daripada komponen induk. Walau bagaimanapun, sesuatu yang saya lakukan dalam komponen kanak-kanak nampaknya menyebabkan gelung tak terhingga. Saya telah cuba melihat soalan lain dan walaupun mereka nampaknya menyelesaikan masalah yang sama, saya tidak boleh menggunakan corak tepat mereka untuk masalah yang saya hadapi, nampaknya berbeza. Saya hanya tidak pasti apa yang saya lihat. </p> <p>Saya mempunyai dua komponen, satu dipanggil ToggleButtons dan satu lagi dipermudahkan kepada butang. Berikut ialah ToggleButtons:</p> <pre class="brush:php;toolbar:false;"><template> <div role="senarai"> <div role="listitem"> <nama slot="kiri" :is-selected="leftSelected" </div> <div role="listitem"> <nama slot="kanan" :is-selected="rightSelected" </div> </div> </template> <skrip> eksport lalai { alat peraga: { leftSelectedAwalnya: { jenis: Boolean, lalai: benar, } }, data() { kembali { kiriDipilih: benar, kananDipilih: palsu, } }, beforeMount() { this.leftSelected = this.leftSelectedInitially; this.rightSelected = !this.leftSelectedInitially; }, kaedah: { togol(override) { this.leftSelected = override == 'left'; this.rightSelected = override == 'right'; } } } </script></pre> <p>这是它与按钮的实现：</p> <pre class="brush:php;toolbar:false;"><ToggleButtons ref="tb"> <template v-slot:left="{ isSelected, }"> <butang class="butang" :class="{ menengah: !isSelected }" :aria-pressed="isSelected" :togglable="benar" v-text="'left'" @click="togol('kiri')" /> </template> <template v-slot:right="{ isSelected, }"> <butang class="butang" :class="{ menengah: !isSelected }" :aria-pressed="isSelected" :togglable="benar" v-text="'betul'" @click="togol('kanan')" /> </template> </ToggleButtons></pre> <p>其中togol方法为：</p> <pre class="brush:php;toolbar:false;">togol(arah) { this.$refs.tb.toggle(direction); },</pre> <p>正如你可能已经从代码中看到的残留物，我之前尝试过各种模式，包括送过包括送包括送包括這所有这些都导致了相同的“你创建了一个无限循环”的消息。</p> <p>我想知道是否因为该方法在尝试渲染时调用了toggle。我不确定这是否间在尝试渲染时调用了toggle。我不确定这是否间定这是否鐇会富。这里的主要问题是我不明白这个循环是从哪里来的。我目前的。主要目标是理解出了什么问题，这样如果再次发生，我就能看到它，即使修我使从是使更简单的方法。</p>

:toggleLeft="toggle('left')"
:toggleRight="toggle('right')

Vue.component('toggle-buttons',{
  props: {
    leftSelectedInitially: {
        type: Boolean,
        default: true,
    }
  },
  data() {
      return {
          leftSelected: true,
          rightSelected: false,
      }
  },
  beforeMount() {
      //this.leftSelected = this.leftSelectedInitially;
      //this.rightSelected = !this.leftSelectedInitially;
  },
  methods: {
      toggle(override) {
          console.log(`override: ${override}`)
          this.leftSelected = override == 'left';
          this.rightSelected = override == 'right';
      }
  },
  template: `
<div role="list">
  <div role="listitem">
      <slot name="left" :is-selected="leftSelected" :toggleLeft="toggle('left')" />
  </div>
  <div role="listitem">
      <slot name="right" :is-selected="rightSelected" :toggleRight="toggle('right')" />
  </div>
</div>
`
});

new Vue({
  el:'#app',
  methods: {
  toggle(direction) {
    console.log(`direction: ${direction}`)
    this.$refs.tb.toggle(direction);
    }
  }
})

#app { line-height: 2; }
[v-cloak] { display: none; }

<div id="app">
<toggle-buttons ref="tb">
    <template v-slot:left="{ isSelected }">
        <button
            class="button"
            :class="{ secondary: !isSelected }"
            :aria-pressed="isSelected"
            :togglable="true"
            v-text="'left'"
            @click="toggle('left')"
        />
    </template>
    <template v-slot:right="{ isSelected }">
        <button
            class="button"
            :class="{ secondary: !isSelected }"
            :aria-pressed="isSelected"
            :togglable="true"
            v-text="'right'"
            @click="toggle('right')"
        />
    </template>
</toggle-buttons>
</div>
<script src="https://unpkg.com/vue@2/dist/vue.min.js"></script>