组件数据依赖场景
我们在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
评论列表
评论内容: