情景:
父组件中引入上传附件的子组件:点击组件可以分别上传对应要求的图片,子组件内部循环可创建多个模块.
父组件传入数组子组件循环来创建不同的组件模块,所有事件都在子组件内部.
父组件页面的上方同时有一个上传图片按钮上传图片后会显示在第一个模块:
子组件上定义ref="refName",父组件的方法中用this.$refs.refName.method去调用子组件方法
调用了')
console.log('index: '+index)
// this.aaa();
if(!this.fileInfor[index].imgUrl){
//如果当前框里没有图片,则实现上传
document.getElementsByClassName('upload_file')[index].click();
}
},
父组件template
<up-load :fileInformation="fileInformation" ref="uploadRef">
父组件method中定义方法,同时传入相应的index值.
调用了')
this.$refs.uploadRef.fileClick(0);
},
下面看下Vue父组件调用子组件事件
Vue父组件向子组件传递事件/调用事件
不是传递数据（props）哦，适用于 Vue 2.0
子组件：
调用成功')
}
}
}
父组件：
export default {
methods: {
click () {
this.$refs.child.$emit('childMethod') // 方法1
this.$refs.child.callMethod() // 方法2
},components: {
child: child
}
}
总结
以上所述是小编给大家介绍的vue 父组件调用子组件方法及事件。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/vue/32961.html