vue에서 부자 구성 요소 전가, 갈고리 함수 mounted 한 번만 실행하는 작업 해결

mounted 함수는 html과 템플릿을 렌더링한 후에 한 번만 불러올 수 있지만 하위 구성 요소 중 첫 번째 데이터만 정상적으로 보이기 때문에 업데이트 함수를 하나 더 추가해야 업데이트 후에 값을 다시 불러와서 데이터의 정상적인 표시를 완성할 수 있습니다.
beforCreate(만들기 전)
Created(만든 후)
beforMount(로드하기 전)
Mounted(로드된 후)
beforUpdate(업데이트 이전)
Updated(업데이트 후)
beforDestroy(제거 전)
Destroyed(제거 후)
activate(keep-alive 구성 요소 활성화 시 호출)
deactivated (keep-alive 구성 요소가 비활성화될 때 호출)
errorCaptured (이 구성 요소의 역할은 자손 구성 요소의 오류를 받아들이는 것입니다. 호출입니다. 세 개의 매개 변수 오류 대상, 오류 구성 요소, 오류 정보)
상위 어셈블리 방향
서브어셈블리 전송 값
상위 구성 요소 값을 통해 하위 구성 요소를 호출하여 다른 데이터를 표시합니다.
부모 구성 요소:conponent.vue
서브어셈블리:iconponent.vue
상위 어셈블리

<template>
 <div>
   <span> </span>
   <icomponent-box :id="this.id"></icomponent-box>
 </div>
</template>
<script>
// 
import icomponent from './icomponent.vue';
export default {
 data () {
  return {
   id:12
  }
 },
 components:{ // 
   "icomponent-box": icomponent
 }
}
</script>
<style>
</style>

서브어셈블리

<template>
 <div> </div>
</template>
<script>
export default {
 updated:{
   this.getComponents();
 },
 mounted:{
  this.getComponents();
 },
 data () {
  return {
  }
 },
 methods:{
  getComponents(){
    this.$http.get("api/getcomponents/" + this.id);
  }
 },
 
 props: ["id"] // id 
}

</script>

추가 정보: Vue 부자 구성 요소 전송 값, 하위 구성 요소 데이터는 한 번만 업데이트되고 상위 구성 요소의 데이터는 변경되며 하위 구성 요소는 더 이상 업데이트되지 않습니다.
나는 쓸데없는 말을 더 이상 하지 않겠다. 모두들 코드를 직접 보는 것이 좋겠다.

props:{
  reportInfo:{
    type:Object,
    default:()=>{}
  }
},
data:function(){
	return {
		cityName :' ',
		reportId :' ' ,
	}
}
mounted:function () {
	 var _this = this;
	 
   // ， watch 
   _this.cityName = _this.reportInfo.cityName;
   _this.reportId = _this.reportInfo.reportId;   
}，
watch:{
	reportInfo(newValue, oldValue) {
		var _this = this;
    _this.cityName = newValue.cityName;
    _this.reportId = newValue.reportId;
	}
}

상기 vue에서 부자 구성 요소의 값을 전달하고 갈고리 함수 mounted가 한 번만 실행되는 동작을 해결하는 것은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 참고도 해주시고 저희를 많이 사랑해 주십시오.