Vue3-provide和inject

作用和场景:顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信

跨层传递普通数据:

1.顶层组件通过provide函数提供数据

2.底层组件通过inject函数获取数据

Vue3-provide和inject_第1张图片

既可以传递普通数据,也可以使用ref传递响应式数据(顶层组件修改数据后可以响应过去)

Vue3-provide和inject_第2张图片

但是底层组件不能修改顶层组件传递过来的数据,所以我们可以在顶层组件中跨层传递函数,给子孙后代传递可以修改数据的方法

Vue3-provide和inject_第3张图片

顶层组件

底层组件

这样就可以把父组件里的count改为1000了

Vue3-provide和inject_第4张图片

你可能感兴趣的:(vue,vue.js,前端,javascript)