首页 > 其他分享 >vant组件没有被更新

vant组件没有被更新

时间:2023-07-24 22:11:34浏览次数:35  
标签:van vant observer value prop field 更新 组件

环境: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的意义是什么?看不懂。可能是开发者挖的坑吧。

标签:van,vant,observer,value,prop,field,更新,组件
From: https://www.cnblogs.com/hdxg/p/17578495.html

相关文章

  • 自动更新ssl证书
     @echooffsetlocalset"nginx_home=C:\phpEnv\server\nginx"set"nginx_ssl_path=C:\phpEnv\server\nginx\certs\"(opensslx509-in%nginx_ssl_path%\rxn.crt-checkend86400)|findstr/c:"not">nulif%errorlevel%......
  • android 软件更新代码
     AndroidF#    应用软件经常会因为功能的增加而升级,升级经常是在客户端给用户升级的提示,然后用户下载最新的apk程序包,软件升级过程大多数需要在线完成。      android在线安装apk程序包,主要用到系统自带的apk安装器进行安装。用到系统自带的apk安装器安装......
  • Unity UGUI的RawImage(原始图片)组件的介绍及使用
    UnityUGUI的RawImage(原始图片)组件的介绍及使用1.什么是RawImage组件?RawImage是UnityUGUI中的一个组件,用于显示原始图片。与Image组件不同,RawImage可以直接显示原始图片的像素数据,而不需要经过额外的处理。2.RawImage组件的工作原理RawImage组件通过将原始图片的像素数据直......
  • React函数式组件渲染顺序探究(Demo)
    参考资料:React渲染顺序及useEffect执行顺序探究(含并发模式)codeimport{useEffect,useState}from"react";import{Button}from"antd";functionComponent({name,children}){const[state,setState]=useState(()=>{console.log(`C......
  • 130-vant案例-07-定义错误页面
    定义错误页面#1.配置路由#2.定义页面组件#3.访问不存在的路由会跳转错误页面1.定义路由index.jsimportNotFoundfrom'../views/NotFound.vue'//错误页面,优先级最低{path:'/:pathMatch(.*)*',///:占位符,后面可以随便写/:aa,/:bb;(.*)*:......
  • FASTCGI组件漏洞
    CGIintroductioncommongatewainterface/CGIdescribesastardandfortransferringdatabetweenserverandclientprograms,allowingaclienttorequestdatafromaprogramrunningonanetworkserver viawebbrowserCGIisindependentofanylanguag......
  • spring cloud common模块更新后,需要同步更新哪些服务?
    首先common没有启动类,他里面放的是一些静态资源,公共代码。理论上是需要更新所有依赖common模块的,就是maven依赖里面引用common包的都需要更新,但是这样太麻烦了。一般可以只更新需要依赖这一变动的服务。如果有feign调用,需要更新调用方,被调用方和网关gateway......
  • 初级设计师必看的UI设计组件库
    UI组件库是一个可以理解为重复使用界面设计元素的集合,是一个文件库。UI组件库在整个系统中起着行为层面的作用,是团队内部设计师与开发者之间的横向合作,是保证产品产出一致的标准基础。即时设计资源社区提供丰富的组件库,包括不同行业、不同顶级互联网厂商的UI组件库!可以免费一键使......
  • vue组件封装 - 选择器远程搜索下拉列表
    <!--*component:人员选择-远程搜索下拉列表*time:2023/7/19*author:zx*使用方式*importPersonSelectfrom"@/components/Dialog/personSelect.vue";*components:{PersonSelect}*<person-selectv-model="test"/>--><......
  • vue组件封装 - 省市县下拉选联动
    改封装组件依赖element-china-area-data插件,引入组件可参照:https://www.npmjs.com/package/element-china-area-data<!--*component:省市县下拉选联动*time:2023/7/19*author:zx*使用方式:*importDialogAddressfrom"@/components/Dialog/dialogAddress.......