VUE框架的烦恼
新人学习使用VUE,找到一个VANT的UI框架。中文文档用起来很顺手,之前都是写一些简单的页面,也没遇到什么大问题。
但是昨天开始使用自定义组件功能的时候,就遇到一个坑。按照VUE手册上的说明,开始向子组件中赋值。结果发现Props死活就是不行,传不到子组件上去。后来百度了一圈发现使用了框架后,明明父组件调用子组件就变成了祖孙关系了,因为框架UI在中间横叉了一道。
好不容易搞定了attrs从爷爷传孙子的问题,现在又遇到孙子传爷爷的问题。
listeners
查了很多资料,发现需要将v-on='$listerners'写在父组件上。然后孙子去调用爷爷的方法去传值,但是因为我是使用的VANT框架。父组件就是VANT,所以搞到现在也不知道把v-on='$listerners'写到哪里?
子组件:
<template>
<van-field name="uploader">
<template #input>
<van-uploader multiple v-model="fileList" :after-read="afterRead" :before-read="beforeRead" :max-count="$attrs['num']"
:before-delete="delimg" />
</template>
</van-field>
</template>
......
父组件:
<Uploadimg num="4" type="['image/jpeg', 'image/gif', 'image/png' ,'image/jpg']" v-on='$listerners' />
因为是用了VANT框架,这里的父组件其实是爷爷了。这样写不行,求办法
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
你这里根本没有孙子与爷爷啊,就是父子组件啊,而且根本不需要
v-on='$listerners'
啊。只需要在父组件里面加一个
@updateData="onUpdateData"
,然后子组件在方法里面执行this.$emit('updateData', data)
就行了啊你要么就是没有成功注册组件,要不然就是传递方法错误了
子组件里面this.$emit('updateData', data) 然后在父组件中@updateData="updateData"