userdata

vue⽗组件动态传递数据给⼦组件，⼦组件钩⼦函数monted获

取不到数据的问题

最近在使⽤vue开发原⽣app内嵌webview（h5）遇到⼀个⼩问题，于是百度了⼀下，也未曾发现很有效的解决⽅案，在此整理⼀篇博客给

有需要的⼩伙伴浏览

⾸先讲述⼀下我的应⽤场景，我的应⽤场景是home页⾯有个轮播图，这个轮播图我抽成了⼀个组件—banner组件，在banner组件使⽤

swiper插件进⾏开发的轮播图。从⽗组件异步调⽤app⽅法并请求后端接⼝，拿到数据userData并传递给⼦组件。由于我要动态展⽰当前

的⽤户等级，⽐如说当前⽤户等级时2，那么swiper的参数initialSlide赋值为2。然⽽swiper初始化的⽅法要放在this.$nextTick()⽅法⾥

⾯，这样在⼦组件就获取不到⽗组件传过来的userData数据。。。

废话就不多说了，具体的应⽤场景就是如上所述。下⾯简单说⼀下解决⽅案吧：我是在⼦组件使⽤watch监听⽗组件传递过来的

userDate，因为watch会接收两个值⼀个是newVal和oldVal，我们可以分别打印⼀下这两个值，监听到的userData是在newVal⾥⾯的，

此时我们在⼦组件的data函数⾥⾯return对象声明⼀个变量，就叫userInfo，在watch监听函数⾥⾯将获取到的newVal赋值给userInfo，

这样在⼦组件⾥我们就可以使⽤userInfo了。。。接下来请看代码展⽰吧。。。。

如有问题请⼩伙伴们指正，热烈欢迎。。。