Cara melaksanakan gelung tak terhingga komponen induk-anak dalam Vue 2: gunakan slot

Question

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.

Saya mempunyai dua komponen, satu dipanggil ToggleButtons dan satu lagi dipermudahkan kepada butang. Berikut ialah ToggleButtons:

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

这是它与按钮的实现：

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

其中togol方法为：

togol(arah) {
    this.$refs.tb.toggle(direction);
},

正如你可能已经从代码中看到的残留物，我之前尝试过各种模式，包括送过包括送包括送包括這所有这些都导致了相同的“你创建了一个无限循环”的消息。

我想知道是否因为该方法在尝试渲染时调用了toggle。我不确定这是否间在尝试渲染时调用了toggle。我不确定这是否间定这是否鐇会富。这里的主要问题是我不明白这个循环是从哪里来的。我目前的。主要目标是理解出了什么问题，这样如果再次发生，我就能看到它，即使修我使从是使更简单的方法。

Answer 1

Ikatan berikut pada fungsi toggle tidak masuk akal bagi saya:

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

Oleh kerana fungsi tidak mengembalikan sebarang nilai, ini adalah salah.

Dua ikatan ini akan menyebabkan panggilan fungsi tak terhinggatoggle('left')和toggle('right')

Hanya tambah console.log(direction) dalam fungsi toggle函数中添加console.log(direction) untuk melihat apa yang berlaku.

Jika anda mahukan nasihat tentang penyelesaian yang betul, sila terangkan apa yang anda ingin capai.

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>