Vue父子组件传值问题：子组件props调用返回null排查

Hey Josh, let's break down why your items prop isn't returning results in the CartCheckout child component, even though Vue DevTools shows the data was correctly passed. Here are the most likely culprits and fixes to try:

1. Timing Issue: Child Renders Before Parent Data is Ready #

If your parent component CartOverview fills the items array asynchronously (e.g., via an API call or async function) during its mounted hook, the child will render before the data is available. Your initial check in the child (like in mounted) will see an empty array, even though DevTools later shows the populated data once the async operation finishes.

Fixes: #

• Use a watcher to react to prop changes:
  Add a watcher in CartCheckout to trigger logic whenever items updates:

  export default {
    props: {
      items: {
        type: Array,
        default: () => [] // Always use a function for array/object defaults
      }
    },
    watch: {
      items: {
        immediate: true, // Run on initial component load too
        handler(newItems) {
          if (newItems.length > 0) {
            // Process your data here (e.g., calculate totals, initialize UI)
            console.log("Received updated items:", newItems);
          }
        }
      }
    }
  }
  

• Conditionally render child content:
  In the child's template, use v-if to ensure you only render content when items has data:

  <template>
    <div class="cart-checkout" v-if="items.length">
      <!-- Your checkout UI that uses items -->
      <div v-for="item in items" :key="item.id">{{ item.name }}</div>
    </div>
    <div v-else>Loading cart items...</div>
  </template>
  

2. Prop Declaration Issues #

Double-check your child component's prop declaration to ensure it's set up for reactivity and correct defaults:

• Always return a fresh array from the default function (avoid default: [] directly, as it can cause shared state across component instances).
• Confirm the type is explicitly set to Array:

  props: {
    items: {
      type: Array,
      required: false,
      default: () => [] // Critical for reactivity and isolated state
    }
  }
  

3. Non-Reactive Array Updates in Parent #

If your parent component modifies the items array in a way Vue can't detect (like direct index assignment or length modification), the data might show up in DevTools but won't trigger reactivity in the child.

Correct Reactive Updates in Parent: #

// ❌ Bad (non-reactive)
this.items[0] = updatedItem;
this.items.length = 0;

// ✅ Good (reactive)
this.items.push(newItem); // Add item
this.items.splice(index, 1, updatedItem); // Update item at index
this.items = [...this.items, newItem]; // Replace entire array (triggers reactivity)

4. Accessing Prop in the Wrong Lifecycle Hook #

If you're trying to access this.items in the child's created or mounted hooks, it will only capture the initial (empty) state. Use updated hook (for Vue 2) or onUpdated (for Vue 3) to check for data after parent updates, but pair it with a guard to avoid unnecessary runs:

// Vue 2 example
mounted() {
  // Likely empty here if data is async
  console.log("Mounted items:", this.items);
},
updated() {
  if (this.items.length && !this.hasProcessedItems) {
    this.processCartItems();
    this.hasProcessedItems = true; // Prevent re-running logic
  }
}

Quick Debug Tip #

Add a console.log directly in the child's template (or a computed property) to confirm reactivity:

<template>
  <div>
    {{ JSON.stringify(items) }} <!-- Will update as items changes -->
  </div>
</template>

Give these steps a try—most likely the timing of your async data load or a missing watcher is the root cause!

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