Vue 3에서 구성 요소 인스턴스에 대해 비응답 데이터를 설정하는 방법은 무엇입니까?

Question

<p>Vue2에도 비슷한 문제가 있으므로 <code>$options</code>를 사용하는 것이 좋습니다. </p> <p>하지만 Vue 3에서는 작동하지 않는 것 같습니다. </p> <p>우선, Vue 3 문서에는 <code>$options</code>가 읽기 전용이라고 나와 있습니다. </p> <p>그래서 컴포넌트가 마운트된 인스턴스에서 툴팁을 초기화하려고 하면 매우 이상한 동작이 발생합니다. 툴팁이 표시되면 마지막으로 생성된 컴포넌트부터 표시되므로 <code> $options</code>어떤 면에서 "글로벌"인가요? </p> <p><code>tooltip</code>을 <code>data</code> 안에 넣으면 모든 것이 잘 작동하지만 분명히 툴팁은 반응하지 않을 것이므로 <코드 외부> ;데이터. </p> <pre class="brush:html;toolbar:false;"><템플릿> <나 :class="['bi ', icon, hover && 'text-primary']" class="bg-body" @mouseover="hover = $options.tooltip.show();" @mouseleave="hover = $options.tooltip.hide();" @click="$options.tooltip.hide();" style="커서: 포인터" :제목="제목" ref="아이콘" /> </템플릿> <스크립트> "부트스트랩"에서 {Tooltip}을 가져옵니다;; 기본값 내보내기 { props: ["아이콘", "제목"], 툴팁: null, 데이터() { 반품 { 호버: 거짓 } }, 탑재() { this.$options.tooltip = 새 도구 설명(this.$refs.icon,{ 배치: '하단', 트리거: '수동', 제목: this.title || }); }, } </스크립트>

Answer 1

mounted()hook에서 직접 구성 요소 인스턴스에 비반응형 속성을 연결할 수 있습니다.

으아악

데모