Comment implémenter une boucle infinie de composants parent-enfant dans Vue 2 : utiliser des emplacements

Question

Je dois appeler une méthode d'un composant enfant à partir du composant parent. Cependant, quelque chose que je fais dans le composant enfant semble provoquer une boucle infinie. J'ai essayé d'examiner d'autres questions et bien qu'elles semblent résoudre un problème similaire, je ne peux pas appliquer leur modèle exact au problème auquel je suis confronté, il semble être différent. Je ne suis tout simplement pas sûr de ce que je regarde.

J'ai deux composants, l'un s'appelle ToggleButtons et l'autre est simplifié en un bouton. Voici les ToggleButtons :

<template>
    <div role="liste">
        <div role="listitem">
            <nom de l'emplacement="gauche" :is-selected="leftSelected" :toggleLeft="toggle('left')" />
        </div>
        <div role="listitem">
            <nom de l'emplacement="right" :is-selected="rightSelected" :toggleRight="toggle('right')"
        </div>
    </div>
</modèle>

<script>

    exporter par défaut {
        accessoires : {
            leftSelectedInitial : {
                tapez: booléen,
                par défaut : vrai,
            }
        },

        données() {
            retour {
                leftSelected : vrai,
                rightSelected : faux,
            }
        },

        avantMount() {
            this.leftSelected = this.leftSelectedInitially ;
            this.rightSelected = !this.leftSelectedInitially;
        },

        méthodes : {
            basculer (remplacer) {
                this.leftSelected = override == 'gauche';
                this.rightSelected = override == 'right';
            }
        }

    }
</script>

这是它与按钮的实现：

<ToggleButtons ref="tb">
    <modèle v-slot:left="{
        est sélectionné,
    }">
        <bouton
            class="bouton"
            :class="{ secondaire : !isSelected }"
            :aria-pressed="isSelected"
            :togglable="true"
            v-text="'gauche'"
            @click="toggle('gauche')"
        />
    </modèle>
    <modèle v-slot:right="{
        est sélectionné,
    }">
        <bouton
            class="bouton"
            :class="{ secondaire : !isSelected }"
            :aria-pressed="isSelected"
            :togglable="true"
            v-text="'droit'"
            @click="toggle('right')"
        />
    </modèle>
</ToggleButtons>

其中toggle方法为：

toggle(direction) {
    this.$refs.tb.toggle(direction);
},
 。所有这些都导致了相同的« 你创建了一个无限循环 »的消息。
循的主要问题是我不明白这个循环是从哪里来的。我目前的主要目标是理解出了什么问题，即使修复方法只是找到一个更简单的方法。

Answer 1

La liaison suivante à la fonction toggle n'a aucun sens pour moi :

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

Étant donné que la fonction ne renvoie aucune valeur, c'est faux.

Ces deux liaisons provoqueront des appels de fonctions infinistoggle('left')和toggle('right')

Ajoutez simplement console.log(direction) dans la fonction toggle函数中添加console.log(direction) pour voir ce qui se passe.

Si vous souhaitez des conseils sur la bonne solution, veuillez décrire ce que vous souhaitez réaliser.

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>