VUE框架的烦恼

  • Z时代
  • 2024-02-20
  • 分类：IT

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框架，这里的父组件其实是爷爷了。这样写不行，求办法

回答：

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

回答：

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

以上是 VUE框架的烦恼 的全部内容， 来源链接： utcz.com/p/936159.html

回到顶部