mpvue中使用vant時需要注意onChange事件的示例分析

小編給大家分享一下mpvue中使用vant時需要注意onChange事件的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

最近用了一下Vant Weapp組件庫，但是由于我是用mpvue寫的，所以自然跟小程序引用不一樣，比如我最近引用了vant里面的collapse折疊面板，官網(wǎng)文檔里面介紹的使用方法是這樣的

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為數(shù)組格式

<van-collapse value="{{ activeNames }}">
 <van-collapse-item title="有贊微商城" name="1">
  提供多樣店鋪模板，快速搭建網(wǎng)上商城
 </van-collapse-item>
 <van-collapse-item title="有贊零售" name="2">
  網(wǎng)店吸粉獲客、會員分層營銷、一機多種收款，告別經(jīng)營低效和客戶流失
 </van-collapse-item>
 <van-collapse-item title="有贊美業(yè)" name="3" disabled>
  線上拓客，隨時預(yù)約，貼心順手的開單收銀
 </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">
  提供多樣店鋪模板，快速搭建網(wǎng)上商城
 </van-collapse-item>
 <van-collapse-item title="有贊零售" name="2">
  網(wǎng)店吸粉獲客、會員分層營銷、一機多種收款，告別經(jīng)營低效和客戶流失
 </van-collapse-item>
 <van-collapse-item title="有贊美業(yè)" name="3" disabled>
  線上拓客，隨時預(yù)約，貼心順手的開單收銀
 </van-collapse-item>
</van-collapse>

export default {
 data () {
  return {
   activeName: '1'
  }
 },
 methods: {
  onChange (event) {
   console.log(event)
   this.activeName = event.mp.detail
  }
 }
}

得把原生小程序使用方式為改為mpvue 使用方式

首先是數(shù)據(jù)綁定方式

value="{{activeNames}}"

改為

v-bind:value="activeNames"
//或者
:value="activeNames"

然后是事件監(jiān)聽

在van-collapse組件里加個監(jiān)聽事件

@change="onChange($event)"

mpvue中獲取event值也與原生小程序有所不同：

onChange(event){ // 獲取表單組件filed的值
 console.log(event.mp.detail) // 注意加入mp
}

以上是“mpvue中使用vant時需要注意onChange事件的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！