最近用了一下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)店吸粉獲客、會(huì)員分層營銷、一機(jī)多種收款，告別經(jīng)營低效和客戶流失 </van-collapse-item> <van-collapse-item title="有贊美業(yè)" name="3" disabled>  線上拓客，隨時(shí)預(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)店吸粉獲客、會(huì)員分層營銷、一機(jī)多種收款，告別經(jīng)營低效和客戶流失 </van-collapse-item> <van-collapse-item title="有贊美業(yè)" name="3" disabled>  線上拓客，隨時(shí)預(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"http://或者:value="activeNames"

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

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

@change="onChange($event)"

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

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

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯(cuò)新站長站。