vue 상위 구성 요소를 사용하여 하위 구성 요소를 호출하는 방법(코드 첨부)

이번에는 vue 상위 컴포넌트를 사용하여 하위 컴포넌트를 호출하는 방법(코드 포함)을 보여드리겠습니다. vue 상위 컴포넌트를 사용하여 하위 컴포넌트를 호출할 때 주의사항은 무엇인지 살펴보겠습니다.

시나리오:

상위 구성 요소에 첨부 파일을 업로드하기 위한 하위 구성 요소 소개: 구성 요소를 클릭하여 요구 사항에 해당하는 이미지를 업로드하면 하위 구성 요소의 내부 루프가 여러 모듈을 생성할 수 있습니다.

상위 구성 요소는 배열을 하위 구성 요소 루프로 전달합니다. 다른 구성 요소 모듈을 생성하려면 모든 이벤트가 하위 구성 요소 내에 있습니다.

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

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

하위 구성 요소에서

정의하여 하위 구성 요소를 호출합니다. method ref="refName",父组件的方法中用this.$refs.refName.method

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

상위 컴포넌트 템플릿

<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 상위 구성 요소는 하위 구성 요소에 이벤트/호출 이벤트를 전달합니다

It 데이터(props)를 전달하지 않으며 Vue 2.0에 적합합니다

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

방법 2: 상위 구성 요소는 하위 구성 요소 메서드를 호출합니다

하위 구성 요소:

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

부모 구성 요소:

<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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

postman+json+springmvc를 사용하여 일괄 추가하기

webpack4.0을 패키징하고 최적화하는 방법

위 내용은 vue 상위 구성 요소를 사용하여 하위 구성 요소를 호출하는 방법(코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!