组件数据依赖场景

我们在vue开发中经常会遇到这样的场景：组件B、C是A的子组件，B、C需要用到A组件Http请求的结果才能进行后续的业务处理。例如B、C 要用到A从服务器获取的用户信息，对技术没有追求的码农会在B、C 中各从服务器获取一次用户信息，这样做不仅会增加服务器压力，更为严重的是会导致DOM渲染变慢，降低用户的体验。

方案一：通过事件总线

定义全局事件总线，组件B、C 绑定自定义事件， 当A组件获取到数据后触发B、C的事件，B、C收到后做自己的业务处理。  

bus.$on('bEve', function(val) { 
// B的业务 
}); 
bus.$emit('bEve', result); //A 组件触发 B 组件里的事件

方案二：通过props

A组件请求数据后将数据通过props传递给B、C，B、C通过监听props的改变执行自定义操作。

方案三：Vuex 和 watch 解决依赖问题

在vue中解决组件数据依赖最好的方式是使用 vuex 和 侦听器，笔者将使用下面的案例代码详细说明。

/*  A 组件 */
<template>
  <div>
    <B></B>
    <C></C>
  </div>
</template>

<script>

import C from './C'
import B from './B'

export default {
  name: 'A',
  components: {
    B,
    C
  },
  mounted () {
    this.getUserInfo()
  },
  methods: {
    getUserInfo () {
      this.$http.get('/api/getUserInfo').then((res) => {
        this.$store.commit('setUserInfo', res.data)
      })
    }
  }
}
</script>

<style scoped>

</style>

/* B 组件 */
<script>
import { mapState } from 'vuex'

export default {
  name: 'B',
  data () {
    return {
      
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  methods: {
    getUserOrders () {
       /* ....后续业务*/
    }
  },
  watch: {
    userInfo (newVal, oldVal) {
      this.getUserOrders()
    }
  }
}
</script>

/* store */
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    userInfo: {} // 用户信息
  },
  mutations: {
    setUserInfo (state, payload) {
      state.userInfo = payload
    }
  }
})

export default store