Vue 3에서 구성 요소 인스턴스에 대해 비응답 데이터를 설정하는 방법은 무엇입니까?
<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 ||
});
},
}
</스크립트>
