加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

vue 父组件调用子组件方法及事件

发布时间:2020-12-17 02:28:57 所属栏目:百科 来源:网络整理
导读:情景: 父组件中引入上传附件的子组件:点击组件可以分别上传对应要求的图片,子组件内部循环可创建多个模块. 父组件传入数组子组件循环来创建不同的组件模块,所有事件都在子组件内部. 父组件页面的上方同时有一个上传图片按钮上传图片后会显示在第一个模块: 设

情景:

  父组件中引入上传附件的子组件:点击组件可以分别上传对应要求的图片,子组件内部循环可创建多个模块.

  父组件传入数组子组件循环来创建不同的组件模块,所有事件都在子组件内部.

  父组件页面的上方同时有一个上传图片按钮上传图片后会显示在第一个模块:

  设想思路:点击父组件中的按钮触发子组件中上传方法:

  子组件上定义ref="refName",父组件的方法中用this.$refs.refName.method去调用子组件方法

  子组件中处理上传的方法:  

  父组件template

<up-load :fileInformation="fileInformation" ref="uploadRef">

  父组件method中定义方法,同时传入相应的index值.

此时就可以通过上传按钮将图片放到子组件的第一个模块中了.

下面看下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 父组件调用子组件方法及事件。编程之家 52php.cn 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读