Vue3子组件无法正确接收Props值问题排查

核心原因 #

1. 直接解构props丢失响应式（初始代码的关键问题） #

Vue3中setup参数里的props是一个响应式Proxy对象，直接解构（比如const { filteredResultsLength } = props）会取出当前值的快照，而非响应式引用。当父组件filteredResults.length更新为4时，子组件里解构出的变量不会同步更新，始终停留在初始的0，这就导致模板显示异常。

2. 潜在的数据源响应式问题 #

如果父组件的filteredResults不是用ref或reactive定义的响应式变量，即使父模板显示了正确的长度，子组件也无法感知到后续的更新（不过父模板能正常显示4，说明这个概率较低，但仍需排查）。

解决方案 #

方案1：用toRefs保留props的响应式 #

导入Vue的toRefs工具，将props转为响应式的ref对象后再解构，变量会随props更新同步变化：

import { toRefs } from 'vue'

export default {
  props: ['active-filters', 'filtered-results-length', 'query-string'],
  emits: ["updateFilter"],
  setup(props) {
    const { activeFilters, filteredResultsLength, queryString } = toRefs(props)

    return { 
      activeFilters, 
      filteredResultsLength,
      queryString
    }
  },
  template: `..... {{ filteredResultsLength }} .... {{ (new Date()).getTime() }}
    <div class="container">
      ...
    </div>`
}

方案2：直接在模板中访问props（无需在setup返回） #

如果不在setup中返回filteredResultsLength，模板会直接读取组件的props属性，此时是天然响应式的。同时需确保父组件的filteredResults是响应式数据源：

// 父组件中正确定义响应式数据
import { ref } from 'vue'
const filteredResults = ref([])
// 异步更新后filteredResults.value.length变为4

方案3：规范props定义（推荐） #

用对象形式定义props，明确类型和默认值，采用驼峰命名更符合Vue规范，父组件仍可通过短横线传递：

export default {
  props: {
    activeFilters: {
      type: Object,
      default: () => ({})
    },
    filteredResultsLength: {
      type: Number,
      default: 0
    },
    queryString: {
      type: String,
      default: ''
    }
  },
  emits: ["updateFilter"],
  setup(props) {
    const { activeFilters, filteredResultsLength, queryString } = toRefs(props)
    return { activeFilters, filteredResultsLength, queryString }
  }
}

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