详解mpvue中使用vant时需要注意的onChange事件的坑

Posted 2023-03-09

参考技术A 最近用了一下Vant
Weapp组件库，但是由于我是用mpvue写的，所以自然跟小程序引用不一样，比如我最近引用了vant里面的collapse折叠面板，官网文档里面介绍的使用方法是这样的
1.在
app.json
或
index.json
中引入组件
"usingComponents":

"van-collapse":
"path/to/vant-weapp/dist/collapse/index",
"van-collapse-item":
"path/to/vant-weapp/dist/collapse-item/index"

2.通过value控制展开的面板列表，activeNames为数组格式
<van-collapse
value="
activeNames
">
<van-collapse-item
title="有赞微商城"
name="1">
提供多样店铺模板，快速搭建网上商城
</van-collapse-item>
<van-collapse-item
title="有赞零售"
name="2">
网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失
</van-collapse-item>
<van-collapse-item
title="有赞美业"
name="3"
disabled>
线上拓客，随时预约，贴心顺手的开单收银
</van-collapse-item>
</van-collapse>
Page(
data:

activeNames:
['1']
,
onChange(event)

this.setData(
activeNames:
event.detail
);

);
但是在mpvue里面不能直接这样引入
下面是我的代码
<van-collapse
:value="activeNames"
@change="onChange($event)">
<van-collapse-item
title="有赞微商城"
name="1">
提供多样店铺模板，快速搭建网上商城
</van-collapse-item>
<van-collapse-item
title="有赞零售"
name="2">
网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失
</van-collapse-item>
<van-collapse-item
title="有赞美业"
name="3"
disabled>
线上拓客，随时预约，贴心顺手的开单收银
</van-collapse-item>
</van-collapse>
export
default

data
()

return

activeName:
'1'

,
methods:

onChange
(event)

console.log(event)
this.activeName
=
event.mp.detail



得把原生小程序使用方式为改为mpvue
使用方式
首先是数据绑定方式
value="activeNames"
改为
v-bind:value="activeNames"
//或者
:value="activeNames"
然后是事件监听
在van-collapse组件里加个监听事件
@change="onChange($event)"
mpvue中获取event值也与原生小程序有所不同：
onChange(event)
//
获取表单组件filed的值
console.log(event.mp.detail)
//
注意加入mp

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:详解如何搭建mpvue框架搭配vant组件库的小程序项目mpvue+vant
app搭建微信小程序的方法步骤