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是数据驱动的，尽量避免在组件内直接去获取其他组件，这里只是提供一种方法。

vue 数据传递遇到的那些障碍

推荐阅读