程序员的资源宝库

网站首页 > gitee 正文

vant组件没有被更新 vant组件弹窗问题

sanyeah 2024-03-29 15:20:40 gitee 7 ℃ 0 评论

环境:uniapp、vue3、vant-weapp

<template>
	<van-field :value="content"></van-field>
	<view>{{content}}</view>
</template>

修改content,但van-field并没有跟着发生变化,而下面的{{content}}变化了。这可能是vant-weapp本身的问题。

查看源码后发现,van-field的value prop observer在value变化的时候没有触发。

查阅一番资料知道,observer是在每次setData()执行后才触发。但是,uniapp中没有setData(),只能使用vue3的方式更新data。那怎么办,难道uniapp在开发的时候没有考虑到这一点吗?

那我自己写一个小程序组件试试?于是我写了一个自定义的小程序组件。

<!--my-field.wxml-->
<text>{{value}}</text>
// my-field.js
Component({
    properties: {
    value: {
      type: String,
      observer(value) {
        console.log('my-field value changed:', value);
      },
    }
  },
})
<template>
	<my-field :value="content"></my-field>
</template>

改变content,发现my-field的valur prop observer执行了。那问题就锁定到vant-weapp本身了。

接着尝试换vant-weapp版本、vant-weapp安装方式、在wxcomponents下的命名,都没法找到问题。

于是我想,其他vant组件是否也存在同样问题?我用van-button的size prop试了一下,发现van-button的size prop的observer能够成功执行。

那问题就继续锁定到van-field本身了。

对比van-field和van-button两者的代码,发现van-field中多了一行filed:true。我尝试去掉看看,发现van-field的value prop observer终于执行了!

这个field:value的意义是什么?看不懂。可能是开发者挖的坑吧。

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表