当前位置：首页 > news >正文

Vue3前端开发,provide和enject的基础练习,跨层级传递数据

news 2025/8/4 9:23:19

Vue3前端开发,provide和enject的基础练习,跨层级传递数据！

声明:provide虽然可以跨层级传递，但是依旧是需要由上向下的方向传递。根传子的方向。

<script setup>
import {onMounted, ref} from 'vue'
import Base from './components/Base.vue'
import SetupDemo from './components/SetupDemo.vue'
import ReactiveDemo from './components/ReactiveDemo.vue'
import ComputedDemo from './components/ComputedDemo.vue'
import WatchDemo from './components/WatchDemo.vue'
import MutationsDemo from './components/MutationsDemo.vue'
import WatchDemo2 from './components/WatchDemo2.vue'
import LifeDemo from './components/LifeDemo.vue'
import ImageDemo2 from './components/ImageDemo2.vue'
import Parent from './components/Parent.vue'
import Child from './components/Child.vue'
import TestCom from './components/TestCom.vue'
import Middle from './components/Middle.vue'
import {provide} from 'vue'
const price = ref(49)
const userInfo = ref({name:'admin',age:24})
provide('price-key',price)
provide('userinfo-key',userInfo)
const btnHandle = ()=>{console.log('触发了根组件的方法')price.value++
}
provide('btn-key',btnHandle)
</script>
<template><h3>入口文件</h3><Middle />
</template>

这个是入口组件的内容，我们调用了一个中间组件Middle.vue。

<script setup>
import Three from './Three.vue';
</script>
<template><h2>Midlle vue</h2><Three />
</template>

这个是中间组件的内容，我们调用了一个三级组件Three.vue.

<script setup>
import { inject } from 'vue';const userInfo = inject('userinfo-key')
const price = inject('price-key')
const btnHandle = inject('btn-key')</script>
<template><h4>Three vue</h4><p>车厘子单价{{ price }}</p><ul><li v-for="(item,index) of userInfo" :key="index">{{ item }}</li></ul><hr /><button @click="btnHandle">车里单价自增1</button>
</template>

这个是第三级组件Three.vue的内容。

我们在这里，可以使用enject来方便的接收来自根组件的数据信息。

而且我们可以接收来自父组件的方法。实现对父组件数据的修改效果。

如图，我们确实修改了车厘子的单价。