vue 서브어셈블리 데이터 수정 또는 호출 작업
상위 어셈블리:
this.refs.xxx.서브어셈블리 정의 방법()
외부:
vm.$refs.xxx.서브어셈블리 정의 방법()
주의: 하위 구성 요소는ref 속성을 추가해야 부모 구성 요소는refs를 통해 얻을 수 있습니다.
보충 지식: vue는 데이터 값을 업데이트합니다. 구성 요소를 어떻게 다시 렌더링합니까?
1: 먼저 Vue를 소개합니다.set () 메서드
주: 서버에서 되돌아오는 데이터의 양이 비교적 적거나 몇 개의 필드만 있으면 vue의 set 방법을 사용할 수 있습니다. 데이터의 양이 비교적 크면 두 번째 상황을 직접 보십시오.
홈 API는 다음과 같이 설명합니다.
Vue.set(target,key,value)
매개변수:
{Object | Array} target
{string | number} key
{any} value
반환값: 설정된 새 값
사용법:
응답식 대상에 속성을 추가하고 이 새 속성이 응답식인지 확인하고 보기 업데이트를 터치합니다.이것은 응답식 대상에 새로운 속성을 추가하는 데 사용해야 합니다. 왜냐하면 Vue는 일반적인 새로운 속성을 탐지할 수 없기 때문입니다. (예:this.my Object.newProperty ='hi')
객체는 Vue 인스턴스 또는 Vue 인스턴스의 루트 데이터 객체가 될 수 없습니다.
나는 간단한 예를 들어 이런 용법을 소개한다.
1: 데이터에서 객체를 정의합니다.
data() {
return {
person:{
age:10,
name:' ',
sex:1
}
}
}
2: 서버에서 새 데이터 객체로 돌아가기 요청:
person:{
age:20,
name:' ',
sex:0
}
이때 이 대상을 실시간으로 페이지에 렌더링해야 한다3: Vue로.set () 메서드 데이터 업데이트
다음과 같습니다.
methods: {
getPerson(){
this.$http({
method: "post",
url:this.$$baseURL + "sys/getPerson",
}).then(res => {
Vue.set(this.person,0,{age:res.data.age,name:res.data.name,sex:res.data.sex})
/**
* 0 0
*
*/
});
}
}
이렇게 하면 서버에서 되돌아오는 새 데이터가 실시간으로 구성 요소에 업데이트됩니다.다음은 두 번째 상황을 설명합니다.
이런 상황은 데이터의 양이 비교적 많고 필드가 비교적 많으며 Vue를 사용하는 것이다.set () 방법은 좀 지나치다. 이럴 때 우리는 어떻게 해야 합니까?
핵심 사상은 임시 변수를 정의하는 것이다. 컴퓨터는 계산 속성이기 때문에 이 안의 값은 구성 요소 업데이트 페이지를 실시간으로 렌더링할 수 있다.
1: 우리는 데이터에서 매우 큰 임시 대상을 정의한다
data() {
return {
myTempObj:{} // ,
}
}
2: 우리는 계산 속성에서도 매우 큰 대상을 정의한다이 대상은 우리가 페이지에서 진정으로 사용한 대상이다
computed: {
myObj: {
get: function(){
return this.myTempObj; //
}
},
}
3: 비동기 요청을 시작하여 서버에서 데이터를 되돌려줍니다.
methods: {
getBigObj(){
this.$http({
method: "post",
url:this.$$baseURL + "sys/getBigObj",
}).then(res => {
this.myTempObj=res.bigObj ; //
});
}
}
넷째: 페이지 템플릿 구성 요소에서 사용 방법
<div class="brand-list bybrand_list" v-for="(item, index) in myObj" :key="index">
{{item.name}}
</div>
상기 두 가지 상황은 모두 서비스에서 얻은 데이터가 실시간으로 업데이트되지 않는 문제를 해결할 수 있으며 구체적인 상황에 따라 사용을 선택할 수 있습니다!여러분들께 참고가 되었으면 좋겠고 저희도 많이 응원해 주셨으면 좋겠습니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.