Vue3 组件之间跨级通信

文章目录

  • Vue3 组件之间跨级通信
    • 概述
    • 选项式API
      • 简单使用
      • 支持响应式
      • 调用顶层方法
    • 组合式API
      • 简单使用
      • 支持响应式
      • 底层调顶层方法

Vue3 组件之间跨级通信

概述

通常情况下,当我们需要从父组件向子组件传递数据时,会使用props

但是一些多层级嵌套的组件,形成了一颗巨大的组件树,仅使用 props 则必须将其沿着组件链逐级传递下去,这会非常麻烦。

Vue3 组件之间跨级通信_第1张图片

可以使用provideinject 解决这一问题。一个父组件相对于其所有的后代组件,会作为依赖提供者。任何后代的组件树,无论层级有多深,都可以注入由父组件提供给整条链路的依赖。

Vue3 组件之间跨级通信_第2张图片

选项式API

简单使用

  • 顶层组件通过provide提供数据。
  • 底层组件通过inject接收数据。

定义父组件:Father.vue


定义孙子组件:GrandChild.vue




支持响应式

provide函数:可以访问当前组件实例的数据,同时可以支持响应式数据。

父组件:Father.vue




孙子组件:GrandChild.vue




调用顶层方法

父组件:Father.vue




孙子组件:GrandChild.vue




组合式API

简单使用

父组件:Father.vue




孙子组件:GrandChild.vue




支持响应式

父组件:Father.vue




孙子组件:GrandChild.vue




底层调顶层方法

父组件:Father.vue




孙子组件:GrandChild.vue




你可能感兴趣的:(#,Vue3,vue.js,跨级通信,provide,inject)