vue3中跨层传递provide、inject

前置说明

  在 Vue 3 中，provide 和 inject 是一对用于跨组件树传递数据的 API。它们允许你在祖先组件中使用 provide 提供数据或服务，然后在后代组件中使用 inject 来获取这些数据或服务。这种方式特别适用于跨多个层级的组件传递数据，而不需要逐层传递 Props。

模拟场景：三个界面，FatherPage、MiddlePage、SonPage，其中他们也是层级引用的，FatherPage中引用MiddlePage，然而MiddlePage中包含SonPage界面；

此时，我们想将FatherPage中的数据传递给SonPage中，我们可以使用provide和inject直接进行传递：

示例：

FatherPage.vue:

<script setup name="FatherPage" lang="ts">
import MiddlePage from './MiddlePage.vue';const msg = '父亲界面'
</script><template>
<div><h1>{{msg}}</h1><MiddlePage/>
</div>
</template>

MiddlePage.vue

<script setup name="MiddlePage" lang="ts">
import sonPage from '@/components/ProvideIn/son.vue'
</script><template>
<div class="middle"><h2>中间界面</h2><sonPage/>
</div>
</template>

 sonPage.vue

<script setup name="sonPage" lang="ts">
const dataSmg = '儿子界面'</script><template>
<div class="son"><h3>{{dataSmg}}</h3>
</div></template>

 快速上手：

FatherPage中传递的数据：

<script>
import { provide,ref } from 'vue'//顶层组件提供数据
provide('data-key',' This is a father data!!!')
</script>

SonPage中接受的数据：

<script>
import { inject,provide } from 'vue';const dataFather = inject('data-key')
</script>

完整案例：

 FatherPage

<script setup name="FatherPage" lang="ts">
import { provide,inject,ref } from 'vue'import MiddlePage from './MiddlePage.vue';const msg = '父亲界面'//1.顶层组件提供数据
provide('data-key',' This is a father data!!!')//2.向子组件传递响应式数据
const countMsg = ref(10)
provide('count-key',countMsg)//3.向子组件传递方法
const changeCount =  function(){countMsg.value++
}provide('change-key',changeCount)//4.尝试接受子组件的数据
const dataSon = inject('son-key')// //尝试自己定义数据，自己接受不可行
// provide('data-sonKey',' This is a son two data!!!')// const dataSon = inject('data-sonKey')</script><template>
<div><h1>{{msg}}</h1><hr>数据：{{ dataSon }}<button @click="changeCount">点击改变count</button><MiddlePage/>
</div></template><style scoped></style>

MiddlePage

<script setup name="MiddlePage" lang="ts">
import sonPage from '@/components/ProvideIn/son.vue'
</script><template>
<div class="middle"><h2>中间界面</h2><sonPage/>
</div></template><style scoped>
.middle{background-color: aquamarine;
}
</style>

SonPage

<script setup name="sonPage" lang="ts">
import { inject,provide } from 'vue';const dataFather = inject('data-key')
const dataSmg = '儿子界面'const dataCount = inject('count-key')const changeMethod = inject('change-key')//父组件不能接受子组件的数据
// provide('son-key',dataSmg)</script><template>
<div class="son"><h3>{{dataSmg}}</h3><hr>父组件跳跃中间层传递过来的数据：{{ dataFather }}<h3>响应式数据：{{ dataCount }}</h3><button @click="changeMethod">改变父组件的数据</button>
</div></template><style scoped>
.son{background-color: rgb(145, 145, 63);
}
</style>

效果

 

注意事项：

• provide 和 inject 是全局的，这意味着在整个应用中都可以访问到提供的数据。因此要小心命名冲突。
• inject 可以在任何组件中使用，但通常在需要跨多层组件共享数据时最为有用。
• 如果一个组件同时使用了 provide 和 inject，确保它们的键名不会冲突，否则可能会导致意外的行为。

总结：

1. provide和inject的作用是什么？跨层组件通信
2. 如何在传递的过程中保持数据响应式？第二个参数传递ref对象
3. 底层组件想要通知顶层组件做修改，如何做？传递方法，底层组件调用方法
4. 一颗组件树中只有一个顶层或底层组件吗？相对概念，存在多个顶层和顶层的关系