vue3 跨层级传值

vue 跨层级传值

跨层级传值、我们可以直接使用 vue  的 API  ：provide 和 inject

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

实现步骤 :

1. 顶层传递数据使用 : provide(‘自定义属性名’, 数据)

2. 底层接收数据使用 : inject(‘自定义属性名’) ====> 自定义属性名与provide中自定义属性名一致

接下来我们介绍两种数据的传递

1. 跨层级传递普通数据
   

示例代码 :

① 顶层组件的代码

<script setup>
  import comSonOne from '底层组件的文件地址' // 导入底层组件
 
  import { provide } from 'vue' //导入provide API

  // 跨层级通讯 顶层组件传值
  provide('name', 100)

</script>

<template>
    <div>父组件</div>
    <comSonOne />
</template>

② 底层组件的代码

<script setup>
 import { inject } from 'vue'; // 导入 inject API
import comSonTwo from '下一级底层组件地址'

 const name =inject('name') // 定义一个变量接收provide中的值
</script>

<template>
    <div>儿子组件 : {{ name }}</div>
    <comSonTwo />
</template>

2. 跨层级传递响应式数据

   其实这个地方我们传递响应式数据就是在第二个参数传递时，设置为 ref对象即可；

示例代码 ：

 ① 顶层组件的代码

<script setup>
  import comSonOne from '底层组件地址'
 
  import { provide ,ref } from 'vue' // 导入provide 和 ref 
  const num = ref(0)
  const addNum = () => {
    num.value++
  }
  // 跨层级通讯
  provide('name', num) // 传递响应式数据
  provide('addNum', addNum) // 传递方法 通过方法修改响应式数据

</script>

<template>
    <div>父组件</div>
    <comSonOne />
</template>

② 底层组件的代码

<script setup>
 import { inject } from 'vue';
import comSonTwo from '底层组件地址'

 const name =inject('name')
 const add =inject('addNum') // 当我们调用顶层方法抛出的方法时,整个数据都会响应式变化
</script>

<template>
    <div>儿子组件 : {{ name }}</div>
    <button @click="add">+1</button>
    <comSonTwo />
</template>

注意 : 以上代码只是展示了父子组件的代码, 还有更深一层的代码,在这里并没有展示出来,其实在更深层的一级中,我们也是使用了和 ② 示例代码中的获取 顶层组件传递的值的方法,小伙伴们可以自行添加嵌套层级的组件,实现以下图片中的嵌套即可。这里需要注意的是,我们在嵌套层级比较深的情况下使用的provide和inject 两个API, 在父子组件传值中,建议大家还是使用更为规范的父子之间传值的方法。

嵌套层级图: