Vue3中 provide 和 inject 的使用

前两天, 有个粉丝后台私信说provide和inject什么时候讲讲

所以, 咱们今天就说一下provide和inject如何使用?

provide和inject是实现祖孙组件之间传递消息的

可以理解为父组件可以向任意嵌套的子组件传递消息

我们之前讲到了$attrs可以实现祖孙组件的消息传递, 但是呢$attrs需要在中转组件上添加v-bind=”$attrs”, 所以, 不是很友好的消息传递

接下来, 我们使用provide和inject来实现一下这个功能

我们还是拿父子为例, 不再多些一个组件了, 逻辑是一样的

我们给父组件准备了一些数据, 现在, 我们需要将这些数据传递给子组件

需要我们从vue中引入一个provide

随后调用provide给这次传递起个名字, 再将数据传递过去

随后, 我们需要在子组件进行接收

这样, 我们父组件传递数据给子组件就实现了

接下来, 我们如何实现, 子组件传递数据给父组件呢?

我们需要在父组件中写个函数进行传递

在子组件中进行接收

我们只需要加一个按钮, 当按钮点击了, 我们就给父组件传递数据

功能是实现了, 但是由于ts的类型推断机制并没有很好的推断出来, 所以, 我们需要借助inject的第二个参数, 就是设置默认值

这个默认值什么时候生效, 就是我父组件传递一个数据, 起了个名字是money, 但是呢, 我子组件接收的是moneys, 这时候, 数据肯定接收不到, 因为我们压根就没有传递moneys, 这时候, 就要借助第二个参数了

我们给函数再加一个参数

这样, 我们关于provide和inject的讲解就结束了

我这边将Vue3中经常用到的组件通信, 做了个总结, 如果有同学想要学习, 可以添加我的微信进行领取

今天, 就讲解到这里