provide/inject异步传值问题

provide/inject

大家好！我是野老，今天给大家分享vue中跨组件传值的provide/inject组合。

之前项目中基本没有用过这个组合，近期项目中遇到了需要跨组件传值，当时第一时间就想到这个组合，但实际运用中踩到了很多坑。

官网中有提到provide中注入的数据是非响应式的，但是在实际开发过程中，我们需要传递的数据是响应式，且异步的获取数据，那么这个在传递就存在很多问题。

问题描述

如果按照常规方法传递一个异步获取的数据进行传递，在子孙组件中只能得到一个空对象。

在爷爷组件中注入异步数据。

export default {// 爷爷组件name: 'app',components: {Parent},data() {return {list:{}}},provide(){return {list:this.list}},created(){this.getdata()},methods:{getdata(){// mock异步数据Promise.resolve({name:'野老',age:20}).then(data => {this.list = data})}}}

在孙子组件中注入。

 export default {// 孙子组件inject:['list'],created(){console.log(this.list)    },methods:{change(){this._list.age++}}}

结果输出。

采用工厂函数实现响应式

这里我们需要改变2处数组，第一我们需要将provide注入的数据改变为一个响应式数据。第二步，通过计算属性来获取最新的数据。

爷爷组件中改变，使用一个工厂函数回调方式。

  provide(){return {list:() => this.list}},

子孙组件中

computed:{getlist(){// 爷爷组件中的list方法return this.list()}},

也能通过方法去改变数据。

采用$set实现响应式

this.$set(this.list,'obj',data)

需要注意的是，在传递下去的过程中就多嵌套了一层。

以上就是本期分享。

provide/inject异步传值问题相关推荐

vue2中provide/inject的使用和响应式传值
文章目录前言一.基本用法二.响应式 1.方法一:传递的参数用一个方法返回 2.方法二:把需要传递的参数定义成一个对象总结前言官网概念:这对选项需要一起使用,以允许一个祖先组件向其所有子孙后 ...
vue 组件传值$attrs $listeners $bus provide/inject $parent/$children
$attrs 包含了父作用域中不作为prop被识别的特性绑定,当一个组件没有声明props时,这里会包含所有父作用域的绑定, $listeneers 包含了父作用域中的v-on事件监听器,它可以通过v ...
vue之组件传值爷到孙 provide inject
目录 vue之组件传值爷到孙 provide && inject 使用 provide提供依赖,单个数据,数组形式接受根组件Main.vue 子组件 B.vue BSon.vue ...
vue跨组件之间传值Provide/Inject
官网传送门:inject Vue2.2.0+ # 背景关于Vue组件的通讯方式相信大家能倒背如流父子组件:通过prop,$emit,[$root,$parent,$children] 非父子 ...
Vue 组件化通信 provide inject ,dispatch ,boardcast
入门作为前端最容易上手的框架,Vue入门其实没啥说的,我放一段清单的代码,大家能看懂就说明能上手了 <template><div id="app">< ...
【vue】— provide/inject的原理
系列文章目录 [VUE]- diff算法原理 [VUE]- watch侦听器原理文章目录系列文章目录一.provide/inject的作用及使用方式二.顺道复习一下组件间的通讯方式吧三.源码 ...
浅析provide/inject用法、响应式、全局传递
前言 Vue的父子间传值 : props 爷孙或者更深嵌套的组件间传值: provide/inject 更复杂的结构:vuex provide/inject 提供/注入 provide 一个对象或返回 ...
vue组件通信provide/inject
组件通信 provide/inject 一对使用父组件通过provide提供数据子组件通过inject注入值非响应式,可通过对象内属性的方式进行修改解决深层次组件通信举例: 在app组件下引 ...
export default用法vue_Vue组件通信—provide/inject
前言: 之前在 Vue 中进行组件通信一般都会使用 props,开始使用 provide/inject 是非常偶然的一次尝试. 当时在开发中需要实现祖孙组件,甚至祖祖祖祖孙组件之间的通信,在这种多层级 ...

provide/inject异步传值问题

provide/inject异步传值问题相关推荐

最新文章

热门文章