uni-app中在layout default里使用provide，slot内使用inject报错，子组件使用inject正常

发布于 1周前 作者 gougou168 来自 Uni-App

uni-app中在layout default里使用provide，slot内使用inject报错，子组件使用inject正常

示例代码：

<template>  
  <slot />  
  <div ref="elRef"></div>  
  <BaseComponent />  
</template>  

<script lang="ts" setup>  
import { ref } from 'vue'  
import BaseComponent from './BaseComponent.vue'  

const elRef = ref()  

provide('elRef', elRef)  

onMounted(() => {  
  console.log('elRef:', elRef.value)  
})  
</script>  

<template>  
  <view></view>  
</template>  

<script setup lang="ts">  
import { inject, ref } from 'vue'  

const title = ref('Hello')  

const elRef = inject('elRef')  

onMounted(() => {  
  console.log('elRef:', elRef?.value)  
})  
</script>

操作步骤：

如上代码

预期结果：

slot 内 正常使用 inject

实际结果：

inject 报错：

uni-h5.es.js:15847 [Vue warn]: injection "elRef" not found.

bug描述：

在layout default 中 使用 provide, slot 内使用 inject 报错 子组件使用 inject 正常

Image


Harmonyos Next教程
3 回复

provide 和 inject 必须得再一个组件树中，你给出的 layout/default.vue 和 pages/index/index.vue 看起来也没有什么联系。


刚刚发现了 当时脑子有点短路 没有想到

在uni-app中使用provide和inject进行跨组件状态管理时，确实可能会遇到一些特定的场景问题，特别是在嵌套布局和插槽（slot）中。你提到在layout default里使用provide，在slot内使用inject时报错，但在子组件中直接使用inject却正常。这通常是由于provide和inject的作用域问题引起的。

首先，确保你的provide和inject的使用方式正确。下面是一个简化的代码示例，展示了如何在uni-app中正确使用provide和inject，并尝试模拟你描述的场景。

Parent Component (使用provide)

<template>
  <view class="container">
    <slot></slot>
  </view>
</template>

<script>
export default {
  provide() {
    return {
      sharedData: 'Hello from Parent'
    };
  }
}
</script>

Child Component (正常inject)

<template>
  <view>{{ sharedData }}</view>
</template>

<script>
export default {
  inject: ['sharedData'],
}
</script>

Layout Component with Slot (尝试在slot内inject，可能会出错)

如果直接在插槽内容中尝试使用inject（假设插槽内容是由父组件外部动态传入的），可能会因为作用域问题导致inject失败。这是因为provide的作用域通常限定在直接子组件层级，而不直接作用于插槽内容（除非插槽内容是由一个明确接收provide的子组件渲染的）。

解决方案

为了避免这种作用域问题，可以考虑以下几种方法：

  1. 确保插槽内容是由一个子组件渲染的：这个子组件可以接收provide并正确地将数据传递给插槽内容（如果插槽内容需要访问这些数据）。

  2. 使用事件总线或全局状态管理：如果provide和inject的作用域限制导致问题，可以考虑使用Vuex（如果项目较复杂）或简单的事件总线机制来传递数据。

  3. 重构组件结构：如果可能，重新考虑组件的设计，使得数据的流动更加直观和可控。

由于直接修改插槽内容的inject行为可能不是最佳实践，且受限于框架的设计，通常建议通过上述解决方案来绕过这类问题。希望这些信息和示例代码能帮助你解决问题！

回到顶部