最近在使用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了。。。接下来请看代码展示吧。。。。

<script>
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
let productSwiper = null;
export default {
    name:'banner',
    props:{
        userData:{
            type:Object,
            default:()=>{ return {} }
        }
    },
    data(){
        return{
            userInfo:{}
        }
    },
    watch:{
        //此处是核心代码
        userData(newVal,oldval){
            this.userInfo=newVal
            //这个是swiper初始化的方法
            this.swiperInit()
        }
    },
    methods:{
        swiperInit() {
            let _this=this
            _this.$nextTick(() => {
                if (productSwiper) {
                    productSwiper.destroy(false); 
                }
                productSwiper = new Swiper("#CardVip", {
                    loop: false,
                    //由于父组件动态传值的问题，这里是无法拿到userData数据的
                    initialSlide:parseInt(_this.userInfo.levelNum),
                    observer: true,
                    observeParents: true,
                    // swiper配置中间显示两边部分显示
                    slidesPerView: "auto",
                    centeredSlides:true,
                    // 间隔
                    spaceBetween: 13,
                    onInit: function(swiper){
                        // 初始化
                        _this.curSwiperIndex=swiper.activeIndex
                        _this.aboutProcess(_this.curSwiperIndex)
                    },
                    onSlideChangeStart:function(swiper){
                        _this.curSwiperIndex=swiper.activeIndex
                        _this.aboutProcess(_this.curSwiperIndex)
                    }
                });
            });
        },
        // swiper关联进度条
        aboutProcess(i){
             this.$nextTick(()=>{
                this.navWidth = this.$refs.navTt.offsetWidth;
                this.navItemWidth = this.$refs.itemBar[0].offsetWidth;
                let navTt = document.getElementsByClassName('progress')[0];
                navTt.scrollLeft=(i) * parseFloat(this.navItemWidth) || 0;
            })
        },


}
</script>

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