vue 父組件調(diào)用子組件方法及事件
情景:
父組件中引入上傳附件的子組件:點(diǎn)擊組件可以分別上傳對應(yīng)要求的圖片,子組件內(nèi)部循環(huán)可創(chuàng)建多個(gè)模塊.
父組件傳入數(shù)組子組件循環(huán)來創(chuàng)建不同的組件模塊,所有事件都在子組件內(nèi)部.
父組件頁面的上方同時(shí)有一個(gè)上傳圖片按鈕上傳圖片后會顯示在第一個(gè)模塊:
設(shè)想思路:點(diǎn)擊父組件中的按鈕觸發(fā)子組件中上傳方法:
子組件上定義ref="refName",父組件的方法中用this.$refs.refName.method去調(diào)用子組件方法
子組件中處理上傳的方法:
fileClick(index) {
console.log('子組件的fileClick被調(diào)用了')
console.log('index: '+index)
// this.aaa();
if(!this.fileInfor[index].imgUrl){
//如果當(dāng)前框里沒有圖片,則實(shí)現(xiàn)上傳
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中定義方法,同時(shí)傳入相應(yīng)的index值.
Upload(){
// console.log('父組件的xiechengUpload被調(diào)用了')
this.$refs.uploadRef.fileClick(0);
},
此時(shí)就可以通過上傳按鈕將圖片放到子組件的第一個(gè)模塊中了.
下面看下Vue父組件調(diào)用子組件事件
Vue父組件向子組件傳遞事件/調(diào)用事件
不是傳遞數(shù)據(jù)（props）哦，適用于 Vue 2.0
方法一：子組件監(jiān)聽父組件發(fā)送的方法
方法二：父組件調(diào)用子組件方法
子組件：
export default {
mounted: function () {
this.$nextTick(function () {
this.$on('childMethod', function () {
console.log('監(jiān)聽成功')
})
})
}，
methods {
callMethod () {
console.log('調(diào)用成功')
}
}
}
父組件：
<child ref="child" @click="click"></child>
export default {
methods: {
click () {
this.$refs.child.$emit('childMethod') // 方法1
this.$refs.child.callMethod() // 方法2
},
components: {
child: child
}
}
總結(jié)
以上所述是小編給大家介紹的vue 父組件調(diào)用子組件方法及事件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
基于Vue實(shí)現(xiàn)頁面全屏封裝的詳細(xì)步驟
眾所周知：目前可視化大屏,視頻播放等常見功能都需要用到全屏,本文將使用兩種技術(shù)實(shí)現(xiàn)全屏功能的封裝,讓不同技術(shù)棧的同學(xué)都可以輕松掌握,好了,讓我們來實(shí)現(xiàn)一個(gè)既兼容性強(qiáng)又易于管理的全屏功能組件吧,需要的朋友可以參考下2024-08-08
vue項(xiàng)目如何通過url鏈接引入其他系統(tǒng)頁面
這篇文章主要介紹了vue項(xiàng)目如何通過url鏈接引入其他系統(tǒng)頁面問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue 級聯(lián)下拉框的設(shè)計(jì)與實(shí)現(xiàn)
在前端開發(fā)中，級聯(lián)選擇框是經(jīng)常用到的，這樣不僅可以增加用戶輸入的友好性，還能減少前后端交互的數(shù)據(jù)量。本文就介紹一下使用Vue實(shí)現(xiàn)級聯(lián)下拉框，感興趣的可以了解一下2021-07-07
vue項(xiàng)目如何使用$router.go(-1)返回時(shí)刷新原來的界面
這篇文章主要介紹了vue項(xiàng)目如何使用$router.go(-1)返回時(shí)刷新原來的界面問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue 應(yīng)用中結(jié)合vux使用微信 jssdk的方法
今天小編就為大家分享一篇Vue 應(yīng)用中結(jié)合vux使用微信 jssdk的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
使用element-ui實(shí)現(xiàn)行合并過程
這篇文章主要介紹了使用element-ui實(shí)現(xiàn)行合并過程，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue數(shù)據(jù)監(jiān)聽器watch和watchEffect的使用
今天我們來學(xué)習(xí)一下watch監(jiān)聽器和它的好兄弟watchEffect監(jiān)聽器。這個(gè)相對來說比較簡單，用的不是很多，當(dāng)然了，根據(jù)自己的項(xiàng)目情況自行決定使用，希望對大家有所幫助2023-02-02
這篇文章主要介紹了vue實(shí)現(xiàn)lodop打印功能的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了vue項(xiàng)目首屏打開速度慢的解決方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了Vue EventBus自定義組件事件傳遞，組件化應(yīng)用構(gòu)建是Vue的特點(diǎn)之一，本文主要介紹EventBus進(jìn)行數(shù)據(jù)消息傳遞 ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06