Vue使用provide各种传值后inject获取undefined的问题及解决

在Vue中，可以通过provide和inject实现非父子组件之间的数据传递。但是，在实际使用中，会遇到使用provide传递的值在inject中获取时出现undefined的情况。本文将详细讲解这个问题以及解决方案。

问题表现

使用provide向子组件提供数据，但在子组件中使用inject获取时，却获取到了undefined。

问题原因

在Vue中，provide和inject的使用需要注意以下几点：

• provide和inject是祖先组件和后代组件之间进行数据传递的方式。只要组件之间存在祖先和后代的关系，就可以使用这种方式进行传值。
• provide提供数据，而inject接收数据。这里需要注意的是，inject只能接收provide提供的数据，而不能直接从祖先组件中获取数据。也就是说，如果provide提供的数据没有被inject接收，那么这个数据在整个后代组件中是不存在的。

综上，产生undefined的原因是，子组件在接收provide提供的数据时，没有设置正确的prop名称。

解决方案

• 子组件使用inject时，必须正确设置prop名称。由于provide和inject的数据传递是通过prop实现的，所以必须在子组件中设置正确的prop名称。
• 当provide提供的数据是动态变化的时候，必须使用响应式数据。如果provide提供的数据没有使用响应式数据，那么当provide提供的数据发生变化时，inject获取的值也不会发生变化，依然是undefined。

解决方案示例

示例1：provide提供静态数据，子组件获取数据时设置正确的prop名称

<!-- 祖先组件 -->
<template>
  <div>
    <child :message="message"></child>
  </div>
</template>

<script>
export default {
  provide() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  inject: ['message'],
  props: {
    message: {
      type: String,
      default: ''
    }
  }
}
</script>

通过在子组件的props中设置正确的prop名称，可以正确地获取provide提供的数据。

示例2：provide提供动态数据，使用响应式数据保证数据变化时，inject也能够获取到最新的数据

<!-- 祖先组件 -->
<template>
  <div>
    <child></child>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  provide() {
    return {
      message: this.message
    }
  },
  mounted() {
    setInterval(() => {
      this.message = 'Hello World!'
    }, 1000)
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  inject: ['message'],
  data() {
    return {
      localMessage: this.message
    }
  },
  created() {
    setInterval(() => {
      this.localMessage = this.message
    }, 100)
  }
}
</script>

通过使用响应式数据，保证了provide提供的数据变化时，inject也能够获取到最新的数据。同时，在子组件中定义一个响应式的localMessage变量，并通过定时器将provide提供的message值赋值给它，从而保证了inject拿到的数据一直是最新的。