小编给大家分享一下mpvue中使用vant时需要注意onChange事件的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
创新互联主营喀什网站建设的网络公司,主营网站建设方案,
重庆APP开发,喀什h5成都小程序开发搭建,喀什网站营销推广欢迎喀什等地区企业咨询
最近用了一下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为数组格式
提供多样店铺模板，快速搭建网上商城
网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失
线上拓客，随时预约，贴心顺手的开单收银
Page({
data: {
activeNames: ['1']
},
onChange(event) {
this.setData({
activeNames: event.detail
});
}
});但是在mpvue里面不能直接这样引入
下面是我的代码
提供多样店铺模板，快速搭建网上商城
网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失
线上拓客，随时预约，贴心顺手的开单收银
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时需要注意onChange事件的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
网页名称：mpvue中使用vant时需要注意onChange事件的示例分析-创新互联
文章路径：
http://cdxtjz.cn/article/cddcsg.html
