Vue 2中实现父子组件无限循环的方法：使用插槽

Question

我需要从父组件中调用子组件的一个方法。然而，我在子组件中做的一些事情似乎导致了一个无限循环。我尝试过查看其他问题，虽然它们似乎是在解决类似的问题，但我无法将它们的确切模式应用到我面临的问题上，它似乎是不同的。我只是不确定我在看什么。

我有两个组件，一个叫做ToggleButtons，另一个被简化为一个按钮。这是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>

    export default {
        props: {
            leftSelectedInitially: {
                type: Boolean,
                default: true,
            }
        },

        data() {
            return {
                leftSelected: true,
                rightSelected: false,
            }
        },

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

        methods: {
            toggle(override) {
                this.leftSelected = override == 'left';
                this.rightSelected = override == 'right';
            }
        }

    }
</script>

这是它与按钮的实现：

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

其中toggle方法为：

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

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

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

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>