情景:
父組件中引入上傳附件的子組件:點擊組件可以分別上傳對應要求的圖片,子組件內部循環可創建多個模塊.
父組件傳入數組子組件循環來創建不同的組件模塊,所有事件都在子組件內部.
父組件頁面的上方同時有一個上傳圖片按鈕上傳圖片后會顯示在第一個模塊:
設想思路:點擊父組件中的按鈕觸發子組件中上傳方法:
子組件上定義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
<template> <x-button type="submit" class="custom-primary" @click.native="xiechengUpload">上傳圖片</x-button> <up-load :fileInformation="fileInformation" ref="uploadRef"></up-load></template>
父組件method中定義方法,同時傳入相應的index值.
Upload(){ // console.log('父組件的xiechengUpload被調用了') this.$refs.uploadRef.fileClick(0);},此時就可以通過上傳按鈕將圖片放到子組件的第一個模塊中了.
下面看下Vue父組件調用子組件事件
Vue父組件向子組件傳遞事件/調用事件
不是傳遞數據（props）哦，適用于 Vue 2.0
方法一：子組件監聽父組件發送的方法
方法二：父組件調用子組件方法
子組件：
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 }}總結
以上所述是小編給大家介紹的vue 父組件調用子組件方法及事件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
