115盘-百度哼唱
![userdata](/uploads/image/0980.jpg)
2023年3月31日发(作者:sir模型)
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了。。。接下来请看代码展⽰吧。。。。
importSwiperfrom'swiper';
import'swiper/dist/css/';
letproductSwiper=null;
exportdefault{
name:'banner',
props:{
userData:{
type:Object,
default:()=>{return{}}
}
},
data(){
return{
userInfo:{}
}
},
watch:{
//此处是核⼼代码
userData(newVal,oldval){
fo=newVal
//这个是swiper初始化的⽅法
Init()
}
},
methods:{
swiperInit(){
let_this=this
_this.$nextTick(()=>{
if(productSwiper){
y(false);
}
productSwiper=newSwiper("#CardVip",{
loop:false,
//由于⽗组件动态传值的问题,这⾥是⽆法拿到userData数据的
initialSlide:parseInt(_um),
observer:true,
observeParents:true,
//swiper配置中间显⽰两边部分显⽰
slidesPerView:"auto",
centeredSlides:true,
//间隔
spaceBetween:13,
onInit:function(swiper){
//初始化
_perIndex=Index
_perIndex=Index
_rocess(_perIndex)
},
onSlideChangeStart:function(swiper){
_perIndex=Index
_rocess(_perIndex)
}
});
});
},
//swiper关联进度条
aboutProcess(i){
this.$nextTick(()=>{
th=this.$Width;
mWidth=this.$r[0].offsetWidth;
letnavTt=mentsByClassName('progress')[0];
Left=(i)*parseFloat(mWidth)||0;
})
},
}
如有问题请⼩伙伴们指正,热烈欢迎。。。
更多推荐
userdata
发布评论