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

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来方便的接收来自根组件的数据信息。

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

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

车厘子单价默认是49.我们点击按钮触发了根组件的方法，修改了2次单价。变成了51元。