Vue3父组件异步Props传值，子组件收不到值？跟我学这几招轻松解决

2023-04-10 10:32:38

理解Vue3中异步Props传递的挑战

Vue3中，Props是父子组件间单向数据流的机制。通常情况下，Props是同步传递的，即父组件更新Props时，子组件也会立即更新。但是，父组件也可能异步更新Props，比如从异步请求中获取数据或使用setTimeout、setInterval函数更新Props。

这种情况下，子组件可能无法接收到异步更新的Props。因为子组件只会在父组件首次渲染时接收到Props，而不会在后续更新中再次接收。

解决异步Props传递问题的方案

1. watch 选项

watch选项允许子组件监听父组件Props的变化。父组件更新Props时，watch选项会自动触发，并执行指定的回调函数。在回调函数中，可以获取更新后的Props值并更新子组件状态。

export default {
  watch: {
    asyncData(newValue, oldValue) {
      // 更新子组件状态
    }
  }
}

2. async 和 await

在子组件中，可以使用async和await等待父组件的异步请求完成，再获取Props值。这样能确保子组件在接收到Props值之前不会渲染。

export default {
  async created() {
    // 等待父组件的异步请求完成
    await this.$parent.asyncRequest()

    // 获取Props值
    const propsValue = this.$props.asyncData
  }
}

3. provide 和 inject

provide和inject是Vue3父子组件通信的另一种机制。provide允许父组件向子组件提供数据，inject允许子组件从父组件获取数据。

// 父组件
export default {
  provide() {
    return {
      asyncData: this.asyncData
    }
  }
}

// 子组件
export default {
  inject: ['asyncData'],

  created() {
    // 获取Props值
    const propsValue = this.asyncData
  }
}

4. Composition API

Composition API是Vue3中一种新的API，允许以更函数化的方式编写组件。通过ref和watch选项，可以实现异步Props传递。

import { ref, watch } from 'vue'

export default {
  setup() {
    // 创建一个ref，用于存储异步Props值
    const asyncData = ref(null)

    // 监听父组件Props的变化
    watch(() => this.$props.asyncData, (newValue, oldValue) => {
      // 更新asyncData ref
      asyncData.value = newValue
    })

    return {
      asyncData
    }
  }
}