這次帶給大家如何使用vue父元件呼叫子元件（附程式碼），使用vue父元件呼叫子元件的注意事項有哪些，下面就是實戰案例，一起來看一下。
情境:
父元件中引入上傳附件的子元件:點選元件可以分別上傳對應要求的圖片,子元件內部循環可建立多個模組.
父元件傳入數組子元件循環來建立不同的元件模組,所有事件都在子元件內部.
##父元件頁面的上方同時有一個上傳圖片按鈕上傳圖片後會顯示在第一個模組:
# 設想思路:點擊父元件中的按鈕觸發子元件中上傳方法: 子元件上定義ref="refName",
父元件的方法中用this.$refs.refName.method
去呼叫子元件方法 子元件中處理上傳的方法: # 父元件template<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);
},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父元件呼叫子元件（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
