Vue 2 で親子コンポーネントの無限ループを実装する方法: スロットを使用する

Question

親コンポーネントから子コンポーネントのメソッドを呼び出す必要があります。ただし、子コンポーネントで実行していることによって無限ループが発生しているようです。他の質問を見てみましたが、同様の問題を解決しているようですが、私が直面している問題に正確なパターンを適用することはできず、異なるようです。ただ、何を見ているのか分かりません。

2 つのコンポーネントがあり、1 つは ToggleButtons と呼ばれ、もう 1 つはボタンに簡略化されています。トグルボタンは次のとおりです:

<テンプレート>
    <div role="リスト">
        <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>
</テンプレート>

<スクリプト>

    デフォルトのエクスポート {
        小道具: {
            leftSelectedInitially: {
                タイプ: ブール値、
                デフォルト: true、
            }
        }、

        データ（） {
            戻る {
                左選択: true、
                rightSelected: false、
            }
        }、

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

        メソッド: {
            トグル(オーバーライド) {
                this.leftSelected = オーバーライド == 'left';
                this.rightSelected = オーバーライド == 'right';
            }
        }

    }
</script>

これは按钮の結果です:

<ToggleButtons ref="tb">
    <テンプレート v-slot:left="{
        選択されています、
    }">
        <ボタン
            クラス=「ボタン」
            :class="{ セカンダリ: !isSelected }"
            :aria-pressed="isSelected"
            :togglable="true"
            v-text="左""
            @click="toggle('left')"
        />
    </テンプレート>
    <テンプレート v-slot:right="{
        選択されています、
    }">
        <ボタン
            クラス=「ボタン」
            :class="{ セカンダリ: !isSelected }"
            :aria-pressed="isSelected"
            :togglable="true"
            v-text="右""
            @click="切り替え('right')"
        />
    </テンプレート>
</ToggleButtons>

その中の切り替え方法は次のとおりです:

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

おそらく、コード内に残っているものが転送されているため、v スロットのトグルによる転送を含むさまざまなモードを試してみました。メッセージ。

この方法が実行時にトグルを使用したためかどうかはわかっています。これが無制限の循環をもたらすかどうかはわかりません。ここでの主な問題は、この循環がここから来たものであるかどうかです。

何が問題であるかを認識することが主な目的であり、これが再び発生した場合、修正方法がより単一の方法に到達するまでは解決できると考えられます。

Answer 1

次の toggle 関数へのバインディングは、私にとって意味がありません:

リーリー

関数は値を返さないため、これはエラーです。

これら 2 つのバインディングにより、無限の関数呼び出しが発生します toggle('left') および toggle('right')

console.log(direction) を toggle 関数に追加するだけで、何が起こっているかを確認できます。

正しい解決策についてのアドバイスが必要な場合は、達成したいことについて説明してください。

リーリー リーリー リーリー