vue 跨层级传值
跨层级传值、我们可以直接使用 vue 的 API :provide 和 inject
使用场景 : 顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信
实现步骤 :
-
顶层传递数据使用 : provide(‘自定义属性名’, 数据)
-
底层接收数据使用 : inject(‘自定义属性名’) ====> 自定义属性名与provide中自定义属性名一致
接下来我们介绍两种数据的传递
- 跨层级传递普通数据
示例代码 :
① 顶层组件的代码
<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>
-
跨层级传递响应式数据
其实这个地方我们传递响应式数据就是在第二个参数传递时,设置为 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, 在父子组件传值中,建议大家还是使用更为规范的父子之间传值的方法。
嵌套层级图: