Vue.js组合式API下如何在setup函数中访问传入的props

核心原因 #

1. 子组件的setup函数没有声明接收props参数，导致函数内部无法访问到父组件传入的props属性。模板中能正常访问user是因为Vue会自动把props注入到模板的上下文中，不需要手动声明接收，但setup函数中必须显式接收props作为参数才能访问。
2. 父组件的user是异步获取的响应式数据，仅依赖onMounted触发查询可能出现时序问题，触发查询时user还未完成赋值。

修改后的子组件代码 #

<template>
  <p>Process Payroll</p>
  <h1>{{ user.displayName }} </h1>
  <h1>{{ docs }} </h1>
</template>

<script>
import { ref, watch, toRefs } from 'vue'
import { projectFirestore } from '@/firebase/config'

export default {
    props: ['user'],
    setup(props) {
      // 用toRefs解构props保留响应性
      const { user } = toRefs(props)
      const docs = ref("")

      const returnUser = async () => {
        // 确保user有值再执行查询
        if (!user.value?.displayName) return
        const res = await projectFirestore
            .collection("users")
            .where("displayName", "==", user.value.displayName)
            .get()

        const lastNameList = res.docs.map(d => `${user.value.displayName} ${d.data().lastName}`)
        docs.value = lastNameList
      }

      // 监听user变化，immediate配置会在初始化时就执行一次，替代onMounted逻辑
      watch(user, returnUser, { immediate: true })

      return { docs }
  },
}
</script>

补充说明 #

父组件原本的v-if="user"逻辑可以保留，确保只有user加载完成后才渲染子组件，减少不必要的判断逻辑。如果不需要额外的响应式操作，也可以不用toRefs解构，直接在代码中通过props.user.displayName访问属性即可。

内容的提问来源于stack exchange，提问作者Bilal Hussain