在使用mpvue结合vant框架时，如何避免onChange事件引发的潜在问题？

本文共计635个文字，预计阅读时间需要3分钟。

最近使用了Vant Weapp组件库，但因为我用mpvue编写，所以自然跟小程序引用方式不太一样。比如，我最近使用了Vant中的collapse折叠面板，官方文档介绍的使用方法是：

+ 在app.json中配置

json{ usingComponents: { van-collapse: path/to/vant-weapp/collapse/index }}

最近用了一下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 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。