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

在vue中提供和注入用法

时间:2023-03-31 21:47:21 vue.js

provide:Object|()=>Objectinject:Array|{[键:字符串]:字符串|符号|Object}provide和inject主要是为高级插件/组件库提供用例。不建议直接在应用程序代码中使用。它是2.2.0版本中的新功能。这对选项需要一起使用,才能让一个祖先组件向它的所有子孙组件注入依赖,无论组件层级有多深,只要建立了上下游关系,它就会一直生效。provide选项应该是一个对象或一个返回对象的函数。该对象包含可以注入其后代的属性。您可以使用ES2015Symbols作为此对象中的键,但这仅适用于本机支持Symbol和Reflect.ownKeys的环境。注入选项应该是:一个字符串数组,或者一个对象,它的键是本地绑定名称,它的值是:在可用的注入内容中搜索的键(字符串或符号),或者对象所在的对象:from属性是用于搜索可用注入内容的键(字符串或符号)。默认属性是降级情况下使用的值。使用场景:由于vue有$parent属性,子组件可以访问父组件。但是孙子组件更难访问祖先组件。通过provide/inject可以轻松实现对祖先组件数据的跨级访问。最常见的用法之一是刷新vue组件app.vue这样,子组件调用reload方法实现刷新vue组件的功能。个人认为它实现了跨组件传递数据的方法以下是祖先组件的数据示例。祖父母元素调用Ancestor.vue后代组件后代元素引入注入的数据datas,并在组件内部循环输出实际上,你可以将依赖注入视为“广泛有效的props”的一部分,除了:祖先组件不需要知道哪些后代组件使用它提供的属性。后代组件不需要知道注入的prop来自这里是一个提示:provide和inject绑定不是响应式的,这是有意为之的。但是,如果你传入一个listenable对象,它的属性仍然是响应式的。参考:https://cn.vuejs.org/v2/api/#provide-injecthttps://cn.vuejs.org/v2/guide/components-edge-cases.html#%E4%BE%9D%E8%B5%96%E6%B3%A8%E5%85%A5