집 > 기사 > 웹 프론트엔드 > Vue 상위 구성 요소에서 하위 구성 요소로 값을 동적으로 전달하는 두 가지 방법 공유

Vue 상위 구성 요소에서 하위 구성 요소로 값을 동적으로 전달하는 두 가지 방법 공유

小云云원래의: 2017-12-22 10:58:413930검색

일부 프로젝트 요구 사항에서는 상위 구성 요소가 하위 구성 요소에 동적으로 값을 전송해야 합니다. 예를 들어 여기서 요구 사항은 상위 구성 요소가 axios를 통해 반환된 이미지 URL 배열을 동적으로 얻은 다음 이를 하위 구성 요소에 전달하는 것입니다. 하위 구성 요소는 이미지를 업로드한 후 배열을 가져와 이미지를 표시합니다. 이 글에서는 주로 Vue 상위 컴포넌트에서 하위 컴포넌트로 값을 동적으로 전달하는 두 가지 방법을 소개합니다. 필요한 친구들이 참고하면 도움이 될 것입니다.

두 가지 방법이 있습니다.

방법 1:

props가 값을 전달합니다. 여기서 문제에 주의하세요. 전달된 값은 watch로 모니터링하고 할당해야 합니다. 그렇지 않으면 여기서 얻는 것은 빈 배열입니다.

부모 구성 요소:

<uploadImg :width="200" :height="200" name="productImage" size="750px*750px" ref="productImage" :src-list="this.productImage"></uploadImg>

this.productImage=res.data.cover;

여기서 백그라운드를 통해 반환된 배열은

this.productImage에 할당된 다음 해당 배열은 하위 구성 요소

Sub 구성 요소에 의해 정의된 props 속성 src-list에 전달됩니다. 하위 구성 요소:

watch:{
     srcList(curVal,oldVal){
      if(curVal){
       ;
       this.uploadImg=curVal;
       }
     },
}

그러면 하위 구성 요소가 성공적으로 수행됩니다. 배열 가져오기

방법 2:

ref 속성을 통해 상위 구성 요소는 하위 구성 요소의 메서드를 호출하고 하위 구성 요소에 매개 변수로 전달될 배열을 전달합니다. 하위 구성 요소는 매개 변수를 가져오고

부모 구성 요소를 사용합니다.

this.$refs.productImage.getSrcList(res.data.cover);

하위 구성 요소:

getSrcList(val){
  this.uploadImg=val;
}

PS: 하위 구성 요소에 데이터를 전달하는 vuejs 동적 구성 요소를 살펴보겠습니다.

하위 구성 요소가 정의되면 props는 상위 구성 요소가 하위 구성 요소에 데이터를 전달하도록 지원할 수 있습니다. 이렇게 정의된 props는 하위 구성 요소의 태그에 바인딩 속성을 사용할 수 있지만, 동적 구성 요소를 사용하는 경우에는 하위 구성 요소에 데이터를 전달할 수 없습니다. 컴포넌트는 <컴포넌트>에 바인딩되어야 합니다. 컴포넌트의 기능은 독립적입니다.

. 다음 컴포넌트에서 데이터를 얻으려면 레이어별로 전달해야 합니다. 즉, 하위 구성 요소는 직접 상위 구성 요소에서만 데이터를 가져올 수 있습니다. 루트 구성 요소의 데이터인 경우 상위 구성 요소는 루트 구성 요소의 데이터를 바인딩하기 위해 팝을 계속 노출해야 합니다.

Vue 상위 구성 요소에서 하위 구성 요소로 값을 동적으로 전달하는 두 가지 방법 공유

관련 기사