집 >웹 프론트엔드 >JS 튜토리얼 >vue 상위 구성 요소로 하위 구성 요소를 호출하는 방법 요약

vue 상위 구성 요소로 하위 구성 요소를 호출하는 방법 요약

php中世界最好的语言원래의: 2018-04-27 16:47:055913검색

이번에는 vue 상위 컴포넌트에서 하위 컴포넌트를 호출하는 방법을 요약해보겠습니다. vue 상위 컴포넌트에서 하위 컴포넌트를 호출할 때 주의사항은 무엇인가요? 다음은 실제 사례입니다.

시나리오:

Upload첨부 파일의 하위 구성 요소가 상위 구성 요소에 도입되었습니다. 구성 요소를 클릭하여 해당 이미지를 각각 업로드하고 하위 구성 요소의 내부 루프를 통해 여러 모듈을 만들 수 있습니다.

상위 구성요소는 하위 구성요소에 전달됩니다. 구성요소는 다양한 구성요소 모듈을 생성하기 위해 반복되며, 모든 이벤트는 하위 구성요소 내에 있습니다.

상위 구성요소 상단에 이미지 업로드 버튼도 있습니다. 페이지를 업로드하면 첫 번째 모듈에 표시됩니다.

아이디어: 상위 구성 요소의 버튼을 클릭하여 하위 구성 요소의 업로드 방법을 트리거합니다.

호출할 하위 구성 요소에서 ref="refName",父组件的方法中用this.$refs.refName.method 정의 하위 컴포넌트 메소드

하위 컴포넌트에서 업로드 처리 방법:

 fileClick(index) {
   console.log('子组件的fileClick被调用了')
   console.log('index:  '+index)
   // this.aaa();
   if(!this.fileInfor[index].imgUrl){
   //如果当前框里没有图片,则实现上传
   document.getElementsByClassName('upload_file')[index].click();
  }    
},

상위 컴포넌트 템플릿

<template>
  <x-button type="submit" class="custom-primary" @click.native="xiechengUpload">上传图片</x-button>
  <up-load :fileInformation="fileInformation" ref="uploadRef"></up-load>
</template>

상위 컴포넌트 메소드에서 메소드를 정의하고 해당 인덱스 값을 전달합니다.

Upload(){
  // console.log('父组件的xiechengUpload被调用了')
  this.$refs.uploadRef.fileClick(0);
},

이때, 업로드 버튼을 통해 하위 구성요소의 첫 번째 모듈에 이미지를 넣습니다.

하위 구성요소 이벤트를 호출하는 Vue 상위 구성요소를 살펴보겠습니다.

Vue 상위 구성요소는 이벤트/호출 이벤트를 하위 구성요소에 전달합니다

입니다. 데이터(props) 전달에 관한 것이 아니라 Vue 2.0에 적용됩니다.

방법 1: 하위 구성 요소는 상위 구성 요소가 보낸 메소드를 수신합니다

방법 2: 상위 구성 요소 하위 구성 요소 메서드 호출

하위 구성 요소:

export default {
  mounted: function () {
   this.$nextTick(function () {
    this.$on('childMethod', function () {
     console.log('监听成功')
    })
   })
  }，
  methods {
    callMethod () {
     console.log('调用成功')
    }
  }
}

Parent 구성요소:

<child ref="child" @click="click"></child>
export default {
  methods: {
   click () {
   this.$refs.child.$emit('childMethod') // 方法1
   this.$refs.child.callMethod() // 方法2
  },
  components: {
   child: child
  }
}

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!