Vue——组件传值4:跨级传值 :Provide/Inject

264 阅读1分钟

前提:

官网概念:这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。

通常情况下,组件向组件传递数据,可以采用父子props层层传递,也可以使用busVuex直接交互。在Vue2.2.0之后,Vue还提供了provide/inject选项(provide提供者:将数据传递给使用者,inject使用者:使用提供者提供的数据

  • 在 provide 中指定要传递给子孙组件的数据。

  • 子孙组件通过inject注入祖父组件传递过来的数据。

主要解决深层次的组件嵌套,祖先组件向子孙组件之间传值。

基本用法:

在父组件中使用provide传值,在子组件中用inject接收。

image.png

这种方法传递过来的数据是没有响应性的,当你改变父组件中的name时,子组件中接收的name并不会改变。

官方解释:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的。

响应式

1.方法一:传递的参数用一个方法返回

image.png

2.方法二:把需要传递的参数定义成一个对象

官方解释:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的。

image.png