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

Question

<p>我需要从父组件中调用子组件的一个方法。然而，我在子组件中做的一些事情似乎导致了一个无限循环。我尝试过查看其他问题，虽然它们似乎是在解决类似的问题，但我无法将它们的确切模式应用到我面临的问题上，它似乎是不同的。我只是不确定我在看什么。</p> <p>我有两个组件，一个叫做ToggleButtons，另一个被简化为一个按钮。这是ToggleButtons：</p> <pre class="brush:php;toolbar:false;"><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> </模板> <脚本> 导出默认值{ 道具： { 左选择初始：{ 类型：布尔值， 默认值：真， } }, 数据（） { 返回 { 左选择：真， 右选择：假， } }, 之前安装（）{ this.leftSelected = this.leftSelectedInitially; this.rightSelected = !this.leftSelectedInitial; }, 方法： { 切换（覆盖）{ this.leftSelected = override == '左'; this.rightSelected = override == '右'; } } } </脚本></pre> <p>这就是它与按钮的实现：</p>

    <模板 v 槽：左=”{
        已选中，
    }>>
        <按钮
            类=“按钮”；
            :class="{ secondary: !isSelected }"
            :aria-pressed="isSelected"
            :togglable="true";
            v-text="'左'"
            @click=“切换（'左'）”
        >>
    </模板>
    <模板 v-slot:right="{
        已选中，
    }>>
        <按钮
            类=“按钮”；
            :class="{ secondary: !isSelected }"
            :aria-pressed="isSelected"
            :togglable="true";
            v-text="'右'";
            @click=“切换（'右'）”
        >>
    </模板>
</切换按钮></pre>
<p>其中切换方法为：</p>
<pre class="brush:php;toolbar:false;">切换（方向）{
    this.$refs.tb.toggle(方向);
},</pre>
<p>正如你可能已经从代码中看到的残留物，我之前尝试过各种模式，包括通过 v-slot 提交切换方法。所有这些都导致了相同的“你创建了一个无限循环”的消息。</p>
<p>我想知道是否因为该方法在尝试渲染时调用了切换。我不确定这是否会导致无限循环。我这里的主要问题是我不明白这个循环是从哪里来的。我目前的主要目标是理解生长什么问题，这样如果再次发生，我就能看到它，即使修复方法只是找到一个更简单的方法。</p>            

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>