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

2576 단어 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가 한 번만 실행되는 동작을 해결하는 것은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 참고도 해주시고 저희를 많이 사랑해 주십시오.
(프로그래머스)수박수박수박수박수박수?
java 중국어 전송 디코딩 문제 해결 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage