详解mpvue中使用vant时需要注意的onChange事件的坑？如何改造vue-cli实现多页面应用

最近用了一下VantWeapp组件库，但是由于我是用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-collapsevalue=“{{activeNames}}“》《van-collapse-itemtitle=“有赞微商城“name=“1“》提供多样店铺模板，快速搭建网上商城《/van-collapse-item》《van-collapse-itemtitle=“有赞零售“name=“2“》网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失《/van-collapse-item》《van-collapse-itemtitle=“有赞美业“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-itemtitle=“有赞微商城“name=“1“》提供多样店铺模板，快速搭建网上商城《/van-collapse-item》《van-collapse-itemtitle=“有赞零售“name=“2“》网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失《/van-collapse-item》《van-collapse-itemtitle=“有赞美业“name=“3“disabled》线上拓客，随时预约，贴心顺手的开单收银《/van-collapse-item》《/van-collapse》exportdefault{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+vantapp搭建微信小程序的方法步骤

vue脚手架（vue-cli）所支持的就是尽可能的提高用户体验设计，通过路由减少页面访问次数达到页面无刷新切换。也就是单页面应用。题主所说的“多页面应用”其实是没有什么意义的。如果强行为了实现而去实现也是可以的：取消vue-router功能，全部换成a标签做页面跳转，不能直接a的用js 的location.href跳转，就可以实现多页面了。

不完全是。1. 钩子函数可以说是提供给用户的API，可以通过这些函数去影响生命周期及数据。2. beforeCreate等函数可以让用户方便添加自己的代码，更方便管理页面。3. watch等函数可以更方便用户管理数据。4. 同理，其他的钩子函数也各有自己的作用。