Vue 2에서 부모-자식 구성 요소의 무한 루프를 구현하는 방법: 슬롯 사용
<p>상위 구성 요소에서 하위 구성 요소의 메서드를 호출해야 합니다. 그러나 하위 구성 요소에서 수행 중인 작업이 무한 루프를 일으키는 것 같습니다. 다른 질문을 살펴보았는데 비슷한 문제를 해결하는 것처럼 보이지만 직면한 문제에 정확한 패턴을 적용할 수는 없습니다. 다른 것 같습니다. 내가 무엇을 보고 있는지 잘 모르겠습니다. </p>
<p>두 개의 구성 요소가 있습니다. 하나는 ToggleButtons이고 다른 하나는 버튼으로 단순화되었습니다. ToggleButton은 다음과 같습니다. </p>
<pre class="brush:php;toolbar:false;"><템플릿>
<div role="목록">
<div role="listitem">
<슬롯 이름="left" :is-selected="leftSelected" :toggleLeft="toggle('left')"
</div>
<div role="listitem">
<슬롯 이름="right" :is-selected="rightSelected" :toggleRight="toggle('right')" />
</div>
</div>
</템플릿>
<스크립트>
기본값 내보내기 {
소품: {
leftSelected처음: {
유형: 부울,
기본값: 사실,
}
},
데이터() {
반품 {
leftSelected: 사실,
오른쪽선택: 거짓,
}
},
beforeMount() {
this.leftSelected = this.leftSelectedInitially;
this.rightSelected = !this.leftSelectedInitially;
},
방법: {
토글(재정의) {
this.leftSelected = 재정의 == '왼쪽';
this.rightSelected = 재정의 == '오른쪽';
}
}
}
<p>这是它与按钮的实现：</p>
<pre class="brush:php;toolbar:false;"><ToggleButtons ref="tb">
<템플릿 v-슬롯:왼쪽="{
선택됨,
}">
<버튼
클래스="버튼"
:class="{ 보조: !isSelected }"
:aria-pressed="isSelected"
:togglable="참"
v-text="'왼쪽'"
@click="토글('왼쪽')"
/>
</템플릿>
<템플릿 v-슬롯:오른쪽="{
선택됨,
}">
<버튼
클래스="버튼"
:class="{ 보조: !isSelected }"
:aria-pressed="isSelected"
:togglable="참"
v-text="'맞습니다'"
@click="토글('오른쪽')"
/>
</템플릿>
</ToggleButtons></pre>
<p>其中toggle 방법:</p>
<pre class="brush:php;toolbar:false;">toggle(방향) {
this.$refs.tb.toggle(방향);
},</pre>
<p>정확한 你可能已经从代码中看到的残留물, 저는 이전에 尝试过各种模式, 包括过v-slot传递토글 방식을 사용합니다. "你创建了一个无限循环"의消息。</p>
<p>저희는 이 방법을 사용하여 토글을 설정합니다.个循环是从哪里来的。내가 예전에 그랬어요主要目标是理解了什么问题，这样如果再次发生，我就能看到它，即使修复方法只是找到一个更简单题。</ p>
