这篇文章主要介绍了vue 父组件调用子组件方法及事件的相关资料，父组件传入数组子组件循环来创建不同的组件模块,所有事件都在子组件内部.怎么实现这样一个功能呢
情景:
父组件中引入上传附件的子组件:点击组件可以分别上传对应要求的图片,子组件内部循环可创建多个模块.
父组件传入数组子组件循环来创建不同的组件模块,所有事件都在子组件内部.
父组件页面的上方同时有一个上传图片按钮上传图片后会显示在第一个模块:
立即学习“前端免费学习笔记（深入）”；
设想思路:点击父组件中的按钮触发子组件中上传方法:
子组件上定义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
上传图片
父组件method中定义方法,同时传入相应的index值.
Upload(){
// console.log('父组件的xiechengUpload被调用了')
this.$refs.uploadRef.fileClick(0);
},
此时就可以通过上传按钮将图片放到子组件的第一个模块中了.
下面看下Vue父组件调用子组件事件
e新时代企业网站管理系统6.0 ACC版
下载
系统共有：常规管理，公告管理，新闻管理，产品管理，采购订单管理，留言反馈管理，短信管理，用户管理，管理员管理，在线邮件管理，系统模板管理，图品缩略图及水印管理，Flash幻灯片管理，统计调查管理，系统数据调用管理，自定义扩展管理，语言标签库管理。18个主要功能模块组成。5月10号更新：1、全新双语模式设计开发2、多级动态JS菜单，支持在线添加，修改，删除3、新增单页管理模块，如扩展企业简介，联系方
Vue父组件向子组件传递事件/调用事件
不是传递数据（props）哦，适用于 Vue 2.0
方法一：子组件监听父组件发送的方法
方法二：父组件调用子组件方法
子组件：
export default {
mounted: function () {
this.$nextTick(function () {
this.$on('childMethod', function () {
console.log('监听成功')
})
})
}，
methods {
callMethod () {
console.log('调用成功')
}
}
}
父组件：
export default { methods: { click () { this.$refs.child.$emit('childMethod') // 方法1 this.$refs.child.callMethod() // 方法2 }, components: { child: child } }
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
