vue 数据传递遇到的那些障碍
1.vue中,methods内的方法,可以内部调用,也可以再钩子函数内调用
this.func(),内部的this指向vue已经处理
2.不采用vuex管理数据和状态可能要面临的问题
一个myAxios.js封装了get,post方法,已经拦截函数,遇到的问题是不能通过return将得到的数据赋值
axios({
method: 'get',
url: baseURL + url,
params,
timeout: 30000
})
.then(res => {
return res.data
})
return的这个res.data并不是如我所想的赋值给调用这个axios请求的变量,而是作为下一个then()的参数
axios封装原理与promise一样
解决这个问题有两个方法
(1)定义全局变量$data,绑定在vue原型上,在需要的地方this.$data可以获取
(2)在局部执行调用,然后在该页面执行then()方法,将数据绑定到该页面
3.对象的属性发生改变,view不更新的问题
(1)使用this.$set(this.obj,key,val)方法而不是直接赋值的方法
(2)Vue.set(vm.obj,'k1','v1')
(3)利用Object.assign({},this.obj)创建新对象
vuex里面数据改变,随时更新视图,也是用的$set方法
4.一种很常见的情况,一个父组件下的两个子组件互相影响
组件1和组件2共同组成一个页面,组件1滑动或点击切换时,组件2也随之切换
(1)在父组件分别向组件1,组件2传递对应index,同时接收来自组件1,组件2的值
<subHeadNav :navList="navList" :tabIndex="tabIndex" @changeTab="getTabIndex">
<recommend :navList="navList" :tabIndex="tabIndex" @changeTab="getTabIndex" ></recommend>
在子组件接收时,props里的值是动态绑定的,但props里的值不可修改,需要另定义一个参数去监听,使用watch方法
在子组件
watch:{
tabIndex:{
handler(curVal,oldVal){
this.navIndex = curVal;
this.swiper.slideTo(curVal, 100, false);
}
}
}
(2)使用vuex管理,只需要在相关页面对store状态树进行修改
我当时犯轴怎么都不用vuex,勉强还是写可以完成,一般都是父与子,子与父的数据传递,后面完成登录功能时后悔莫及啊
在底部导航栏,需要根据登录状态来更新标题是 "我的‘’还是“未登录”,这个状态在登录和注销时都会改变,需要动态绑定,但是页面层级复杂,
而且调用登录页面的位置有多个,不可能单纯使用props和emit来绑定
(1)存储这个登录状态可以有多种方法,全局变量,import外部文件,原型都可以,但是都不能实时更新
(2)最后只能在需要的地方
this.$forceUpdate()强行刷新组件
总结:组件间数据的传递非常复杂,只能一层一层传递,最方便快捷的方法就是使用vuex来管理
5.取得其他组件实例
(1)ref <child ref="child"></child> 在parent组件中的this里面封装了$refs={child:vue component}
this.$ref.child就是child的实例,在某些时候可以在父组件直接获取子组件属性
ref
被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs
对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例:
(2)在组件内打印this,可以看到整个结构,使用$root ,$parent ,$children等组合可以打印到你想取得的任何组件实例
tips:vue是数据驱动的,尽量避免在组件内直接去获取其他组件,这里只是提供一种方法。