Vue 2에서 부모-자식 구성 요소의 무한 루프를 구현하는 방법: 슬롯 사용

Question

상위 구성 요소에서 하위 구성 요소의 메서드를 호출해야 합니다. 그러나 하위 구성 요소에서 수행 중인 작업이 무한 루프를 일으키는 것 같습니다. 다른 질문을 살펴보았는데 비슷한 문제를 해결하는 것처럼 보이지만 직면한 문제에 정확한 패턴을 적용할 수는 없습니다. 다른 것 같습니다. 내가 무엇을 보고 있는지 잘 모르겠습니다.

두 개의 구성 요소가 있습니다. 하나는 ToggleButtons이고 다른 하나는 버튼으로 단순화되었습니다. ToggleButton은 다음과 같습니다.

<템플릿>
    <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>

其中toggle 방법:

toggle(방향) {
    this.$refs.tb.toggle(방향);
},

정확한 你可能已经从代码中看到的残留물, 저는 이전에 尝试过各种模式, 包括过v-slot传递토글 방식을 사용합니다. "你创建了一个无限循环"의消息。

저희는 이 방법을 사용하여 토글을 설정합니다.个循环是从哪里来的。내가 예전에 그랬어요主要目标是理解了什么问题，这样如果再次发生，我就能看到它，即使修复方法只是找到一个更简单题。

Answer 1

toggle 함수에 대한 다음 바인딩은 나에게 전혀 의미가 없습니다.

으아악

함수는 어떤 값도 반환하지 않으므로 이는 잘못된 것입니다.

이 두 바인딩으로 인해 무한 함수 호출이 발생합니다toggle('left')和toggle('right')

무슨 일이 일어나는지 보려면 toggle函数中添加console.log(direction)함수에 console.log(direction)를 추가하기만 하면 됩니다.

올바른 솔루션에 대한 조언을 원하시면 달성하고 싶은 것이 무엇인지 설명해 주세요.

으아악 으아악 으아악