当前位置: 首页 > Web前端 > vue.js

provide和inject的用法

时间:2023-03-31 16:22:29 vue.js

1.provide和inject的作用通过provide和inject,可以将一个祖先组件指定的数据和方法传递给它所有的后代。Provide和inject主要用在开发高级插件/组件库的时候用到。由于vue有一个$parent属性,子组件可以访问父组件。但是孙子组件更难访问祖先组件。Provide/inject可以轻松实现对父组件数据的跨级访问。Provide和inject成对出现。2、为什么不用父子组件props传值?因为父子组件props需要知道将值传递给哪个子组件,而el-form组件中会被注入的子组件是不确定的。Provide只需要抛出传递的值,不需要知道使用哪个子组件。子组件通过inject注入获取数据,不需要知道父组件是谁,所以在封装组件库的时候非常方便。并且props只能在父子组件中传值,涉及到孙子时不能使用。3.provider/inject用法provider/inject:简单的说就是在父组件中通过provider提供变量,然后在子组件中将变量  注入  中。需要注意的是,无论子组件有多深,只要调用了inject,就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性中获取数据。  provide:是一个对象,或者是一个返回对象的函数。它包含了要给后代的东西,也就是属性和属性值。  inject:一个字符串数组,或者一个对象。属性值可以是一个对象,包括from和default默认值,from是用于在可用注入内容中搜索的key(字符串或Symbol),表示爷爷multi-layerprovide提供了很多数据,而from属性指定取哪一个key;default指定默认值。  父组件:子组件:总结:这样我们就可以使用admin模板来制作我们的项目了,第四版js提升链接:https://pan.baidu.com/s/18P8k...可以加公众号获取提取码。有不明白的请加q群147936127交流或vx:ltby52119,谢谢~