이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
html5+canvas에서 원형 차트를 동적으로 구현하는 단계에 대한 자세한 설명
pushState 및 replacementState를 사용하는 단계에 대한 자세한 설명
위 내용은 Vue 상위 구성요소는 하위 구성요소 실제 사례를 호출합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!