Vue3中使用provide和inject进而实现组件跨级通信.

最新推荐文章于 2024-08-20 11:11:41 发布

沙漏在下雨

最新推荐文章于 2024-08-20 11:11:41 发布

阅读量1.5k

点赞数 3

分类专栏： Vue 文章标签： vue javascript js html5

本文链接：https://blog.csdn.net/qq_45906219/article/details/114294415

版权

本文探讨Vue3中如何利用provide和inject实现组件间的跨级通信，详细介绍了使用方法、注意事项及响应式原理。通过示例代码展示在组件嵌套较深时，如何避免props传递的繁琐，同时指出在实际应用中需注意的父子组件关系以及对象类型的provide值的处理方式。实验证明，即使不依赖Vue的响应式API，provide/inject也能实现数据的响应式更新。

摘要由CSDN通过智能技术生成

本篇文章参考Vue官网学习，加上自己的理解。
版本： Vue@3

文章目录

关于provide&&inject：

在一般的情况下，父组件向子组件通信我们一般采用 props 属性进行组件之间的通信，但是如果在组件嵌套很深的情况下，这个办法虽然可以，但是却有点繁琐，相比如果使用 vuex的话，我们还需要安装这个插件，所以Vue提供了一组方法 provide&&inject, 父组件中提供一个属性， provide, 子组件中使用一个属性进行值的接受 inject ，这样不管组件之间层级嵌套有多深，都可以实现组件之间的通信。

比如，通信中遇到这种情况:

来自官网的图:

在这里插入图片描述
在这里，我们需要进行组件1 和组件5 的通信，那么这里就可以使用这一对属性了,

使用方法：

父组件

js部分:

const app = Vue.createApp({
   
    data() {
   
      return {
   
        todos: ['Feed a cat']
      }
    },
    components: {
   
      cpn,  // 将子组件进行注册
    },
    provide() {
   
      return {
   
        todos: this.todos,
      }
    }
  })
  app.mount('#app')   //  挂载 app