So implementieren Sie eine Endlosschleife von Eltern-Kind-Komponenten in Vue 2: Verwenden Sie Slots

Question

Ich muss eine Methode einer untergeordneten Komponente von der übergeordneten Komponente aus aufrufen. Allerdings scheint etwas, das ich in der untergeordneten Komponente mache, eine Endlosschleife zu verursachen. Ich habe versucht, mir andere Fragen anzuschauen, und obwohl sie ein ähnliches Problem zu lösen scheinen, kann ich ihr genaues Muster nicht auf das Problem anwenden, mit dem ich konfrontiert bin, es scheint anders zu sein. Ich bin mir einfach nicht sicher, was ich sehe.

Ich habe zwei Komponenten, eine heißt ToggleButtons und die andere ist zu einer Schaltfläche vereinfacht. Hier sind die ToggleButtons:

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

<script>

    Standard exportieren {
        Requisiten: {
            leftSelectedInitially: {
                Typ: Boolesch,
                Standard: wahr,
            }
        },

        Daten() {
            zurückkehren {
                leftSelected: wahr,
                rightSelected: false,
            }
        },

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

        Methoden: {
            umschalten(überschreiben) {
                this.leftSelected = override == 'left';
                this.rightSelected = override == 'right';
            }
        }

    }
</script>

这是它与按钮的实现：

<ToggleButtons ref="tb">
    <template v-slot:left="{
        ist ausgewählt,
    }">
        <-Taste
            class="button"
            :class="{ sekundäre: !isSelected }"
            :aria-pressed="isSelected"
            :toggleable="true"
            v-text="'left'"
            @click="toggle('left')"
        />
    </template>
    <template v-slot:right="{
        ist ausgewählt,
    }">
        <-Taste
            class="button"
            :class="{ sekundäre: !isSelected }"
            :aria-pressed="isSelected"
            :toggleable="true"
            v-text="'right'"
            @click="toggle('right')"
        />
    </template>
</ToggleButtons>

其中toggle方法为:

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

正如你可能已经从代码中看到的残留物 ，所有这些都导致了相同的“你创建了一个无限循环“的消息.

这里的主要问题是我不明白这个循环是从哪里来的.我目前的主要目标是理解出了什么问题,这样如果再次发生,我就能看到它,即使修复方法只是找到一个更简单的方法.

Answer 1

以下对toggle函数的绑定对我来说没有任何意义：

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

由于该函数不返回任何值，所以这是错误的。

这两个绑定会导致函数无限调用toggle('left')和toggle('right')

只需在toggle函数中添加console.log(direction)以查看发生了什么。

如果您想获得关于正确解决方案的建议，请描述您想要实现的目标。

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>