VUE框架的烦恼

发布于 2022-09-13 01:28:14 字数 932 浏览 15 评论 0

新人学习使用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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

够运 2022-09-20 01:28:14

你这里根本没有孙子与爷爷啊,就是父子组件啊,而且根本不需要v-on='$listerners'啊。
只需要在父组件里面加一个@updateData="onUpdateData",然后子组件在方法里面执行this.$emit('updateData', data)就行了啊

话少情深 2022-09-20 01:28:14

你要么就是没有成功注册组件,要不然就是传递方法错误了
子组件里面this.$emit('updateData', data) 然后在父组件中@updateData="updateData"

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文