Vue 2 で親子コンポーネントの無限ループを実装する方法: スロットを使用する
<p>親コンポーネントから子コンポーネントのメソッドを呼び出す必要があります。ただし、子コンポーネントで実行していることによって無限ループが発生しているようです。他の質問を見てみましたが、同様の問題を解決しているようですが、私が直面している問題に正確なパターンを適用することはできず、異なるようです。ただ、何を見ているのか分かりません。 </p>
<p>2 つのコンポーネントがあり、1 つは ToggleButtons と呼ばれ、もう 1 つはボタンに簡略化されています。トグルボタンは次のとおりです:</p>
<pre class="brush:php;toolbar:false;"><テンプレート>
<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></pre>
<p>これは按钮の結果です:</p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p>その中の切り替え方法は次のとおりです:</p>
<pre class="brush:php;toolbar:false;">toggle(方向) {
this.$refs.tb.toggle(方向);
},</pre>
<p>おそらく、コード内に残っているものが転送されているため、v スロットのトグルによる転送を含むさまざまなモードを試してみました。メッセージ。</p>
<p>この方法が実行時にトグルを使用したためかどうかはわかっています。これが無制限の循環をもたらすかどうかはわかりません。ここでの主な問題は、この循環がここから来たものであるかどうかです。 </p> 何が問題であるかを認識することが主な目的であり、これが再び発生した場合、修正方法がより単一の方法に到達するまでは解決できると考えられます。
