vue 상위 구성 요소는 하위 구성 요소 메서드 및 이벤트를 호출합니다.

이 글에서는 하위 구성 요소 메서드와 이벤트를 호출하는 vue 상위 구성 요소에 대한 관련 정보를 주로 소개합니다. 상위 구성 요소는 배열 하위 구성 요소 루프를 전달하여 다양한 구성 요소 모듈을 구현하는 방법을 설명합니다. 이러한 기능

시나리오:

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

상위 구성요소는 배열과 하위 구성요소 루프를 전달하며, 모든 이벤트는 하위 구성요소 내에 있습니다.

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

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

하위 구성 요소에 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('调用成功')
    }
  }
}

상위 구성 요소:

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

위 내용은 모두에게 도움이 되기를 바랍니다. 미래.

관련 글:

응답 쓰기 저장을 통한 nodejs 렌더링 페이지 리소스에 대한 자세한 설명

vue 드롭다운 목록 함수 예제 코드

angular2 모듈 및 공유 모듈에 대한 자세한 설명

위 내용은 vue 상위 구성 요소는 하위 구성 요소 메서드 및 이벤트를 호출합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!