夫天地者,万物之逆旅;光阴者,百代之过客。而浮生若梦,为欢几何?
vue使用技巧: 如何解决组件数据依赖问题

组件数据依赖场景

我们在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


作者:暗夜余晖

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

0

支持

0

反对

posted @2019-9-1  拜读(817)

评论列表

评论内容:



喜欢请打赏

支付宝 微信

请放心支付