toRefs와 함께 스크립트 설정 및 반응 상태 vue 3 사용
P粉387108772
2023-08-26 15:38:41
<p>vue 프로젝트에서 스크립트 설정을 사용하려고 합니다. </p>
<p>스크립트 설정을 사용하기 전의 스크립트는 다음과 같습니다.</p>
<pre class="brush:php;toolbar:false;"><script>
'../containers/Layout.vue'에서 레이아웃을 가져옵니다.
'vue'에서 { 반응형, toRefs } 가져오기
기본값 내보내기 {
이름: '집',
설정() {
const 상태 = 반응성({});
반품 {
...toRefs(상태),
};
},
구성요소: { 레이아웃, 레이아웃 }
}
<p>이제 다음이 있습니다. </p>
<pre class="brush:php;toolbar:false;"><스크립트 설정>
'../containers/Layout.vue'에서 레이아웃을 가져옵니다.
'vue'에서 { 반응형, toRefs } 가져오기
const 상태 = 반응성({});
const 소품 = 정의Props({
헤더: 문자열
})
<p>이 경우 toRefs를 어떻게 사용하는지 잘 모르겠습니다. 첫 번째 경우에는 변수를 반환하므로 <code>...toRefs(state)</code>를 사용하는 방식을 이해합니다.
그런데 이제 어떻게 사용하나요? 아니면 더 이상 필요하지 않습니까?
감사합니다</p>
스크립트 설정에서 직접
으아악state
반응 값에 액세스하려면 다음과 같이 객체 구조 분해를 사용할 수 있습니다.그런 다음 템플릿에서 직접 값에 액세스할 수 있습니다
으아악단, 속성을 모두 다시 입력해야 하니 불편하네요
으아악脚本设置
변수 정의의 암시적 번역to
으아악脚本设置
中的return {...dynamicValue}
是不可替代的,它仅适用于常见用例。这需要将其与脚本
의return {...dynamicValue}
는 교체할 수 없으며 일반적인 사용 사례에만 적합합니다. 이를 위해서는스크립트
와 결합해야 합니다.
으아악return {...toRefs(state)}
没有什么好处,因为脚本块中不使用生成的引用。即使它们是,它们通常也被定义为单独的反应值而不是state
대상:이러한 값을 단일 객체로 처리해야 하는 경우 다음과 같이 결합할 수 있습니다.
으아악스크립트
및脚本
和脚本设置
에도 동일한 방식으로 작동합니다.