Vue 2 で親子コンポーネントの無限ループを実装する方法: スロットを使用する
P粉128563140
P粉128563140 2023-09-03 15:13:47
0
1
418

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

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

<テンプレート> 
<スクリプト> デフォルトのエクスポート { 小道具: { leftSelectedInitially: { タイプ: ブール値、 デフォルト: true、 } }、 データ() { 戻る { 左選択: true、 rightSelected: false、 } }、 beforeMount() { this.leftSelected = this.leftSelectedInitially; this.rightSelected = !this.leftSelectedInitially; }、 メソッド: { トグル(オーバーライド) { this.leftSelected = オーバーライド == 'left'; this.rightSelected = オーバーライド == 'right'; } } }

これは按钮の結果です:

 <テンプレート 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')" />  

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

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

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

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

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

全員に返信 (1)
P粉727531237

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

リーリー

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

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

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

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

リーリー リーリー リーリー
いいねを押す+0
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート
    私たちについて 免責事項 Sitemap
    PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!