provide / inject vue实现父级下面所有子孙组件调用父级的数据

最新推荐文章于 2024-08-23 10:26:27 发布

码农中的小菜鸡

最新推荐文章于 2024-08-23 10:26:27 发布

阅读量171

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/oldolder/article/details/129186468

版权

该文章介绍了如何在Vue.js应用中利用provide/injectAPI来避免重复请求数据并实现父组件到子孙组件的数据传递。通过在父组件中提供数据和方法，子组件可以直接注入并使用，简化了深层组件间的通信过程。

摘要由CSDN通过智能技术生成

业务需求: 父级页面请求数据,在子级和孙级等组件中都要使用,不确定几层,为了避免每个页面重复请求和过多的props,因此使用provide / inject进行实现.

在父组件中provide 返回要传给下级的数据

 /*provide 和 data 同一层级*/
 provide() {
    return{
      publicCategories: () => { return this.categoryList },
      publicBrandList:()=>{ return this.brandList},
      publicSupplierList:()=>{ return this.supplierList},
      publicWarehouseList:()=>{ return this.warehouseList},
      getCategoryList:() => { this.getCategoryList() },
      getBrandList:()=>{ this.getBrandList() }
    }
  },

在子孙级组件中inject 接受父级传的数据

// 同样,inject 和 data也是同级
inject: ['publicCategories','publicBrandList','publicSupplierList','publicWarehouseList','getCategoryList'],
// 使用方法
data(){
	return {
		categories: this.publicCategories()  // 这是父组件传的值
	}
},
methods:{
	// 在子孙级页面声明方法,可直接调用父组件传的方法
	click(){
		this.getCategoryList() 
	}
}