Vue.js组件传值咨询：如何将menuItemsData传递给timeselect组件并接收

Hey there! Let's walk through exactly how to pass your menuItemsData to the timeselect component, whether you're nesting it directly or navigating to it via a route. I'll break it down into simple steps so you can follow along easily.

Case 1: timeselect is a nested child component #

If you're using <timeselect> directly in your current component's template (like a standard child component), here's the straightforward way to pass data:

Step 1: Bind the data in the parent component #

Use Vue's v-bind (you can shorten it to just :) to pass menuItemsData to the timeselect component. It's best practice to use kebab-case for props in the template, even if your parent data uses camelCase:

<!-- Parent component template -->
<timeselect :menu-items="menuItemsData"></timeselect>

Step 2: Receive the prop in the timeselect component #

In your timeselect component's script, define a props option to accept the data. You can use a simple array for basic cases, but an object is better for adding type validation and defaults:

<!-- timeselect component -->
<template>
  <!-- You can use {{ menuItems }} directly in the template now! -->
  <div>{{ menuItems }}</div>
</template>

<script>
export default {
  // Option 1: Basic array syntax
  // props: ['menuItems'],

  // Option 2: Recommended object syntax for validation
  props: {
    menuItems: {
      type: Array, // Adjust this to match your data type (Object, String, etc.)
      required: false, // Set to true if this data is mandatory
      default: () => [] // Default value for arrays/objects needs a factory function
    }
  },
  mounted() {
    // Access the data in methods/hooks using this.menuItems
    console.log('Received menu data:', this.menuItems);
  }
}
</script>

Case 2: You're navigating to timeselect via Vue Router #

If you're "jumping" to the timeselect component as a new route (like using $router.push), the approach is different because it's no longer a parent-child nested relationship. Here's how to handle it:

Step 1: Pass data when navigating #

When triggering the route jump, use either params or query to send your data. For complex data (like arrays/objects), you'll need to stringify it first to avoid issues:

// In your parent component's method where you trigger the jump
this.$router.push({
  name: 'TimeSelect', // Use the route name from your router config (better than path)
  params: {
    menuItems: JSON.stringify(this.menuItemsData)
  }
  // Alternatively, use query if you want the data visible in the URL:
  // query: {
  //   menuItems: JSON.stringify(this.menuItemsData)
  // }
})

Step 2: Retrieve the data in timeselect #

In the timeselect component, access the route data and parse it back from the string:

<!-- timeselect component -->
<script>
export default {
  mounted() {
    // If using params
    const receivedData = JSON.parse(this.$route.params.menuItems);
    // If using query
    // const receivedData = JSON.parse(this.$route.query.menuItems);
    
    console.log('Data from route:', receivedData);
    // You can assign it to a local data property if needed
    this.localMenuData = receivedData;
  },
  data() {
    return {
      localMenuData: []
    }
  }
}
</script>

That's it! Pick the method that matches how you're using the timeselect component, and you'll have your data passed over in no time.

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