SoFunction
Updated on 2025-04-05

vue props pass multiple value instances at once

Array:

<custom-element :whatever="[...array]"></custom-element>

Object:

<custom-element :whatever="{...obj}"></custom-element>

or:

<custom-element v-bind="obj" </custom-element>

Subcomponents:

<ul class="car_wrap">
   <li >
    <span>
     <i class="fa fa-clock-o clock_icon" aria-hidden="true"></i>
    </span>
    <p>{{}}</p>
   </li>
   <li class="car_start">
    <span>
     <i class="fa fa-circle circle_icon" aria-hidden="true"></i>
    </span>
    <p>{{}}</p>
   </li>
   <li class="car_end">
    <span>
     <i class="fa fa-circle circle_icon" aria-hidden="true"></i>
    </span>
    <p>{{}}</p>
   </li>
   <li class="remark">
    <span>
     <i class="fa fa-circle circle_icon" aria-hidden="true"></i>
    </span>
    <p>{{}}</p>
   </li>
  </ul>
  <div class="confirmation_car">
 
 props: {
 
  propsText:{
   type: Object,
   default:{}
  }
 },

Parent component:

 &lt;!-- Select content --&gt;
   &lt;div class="select_content"&gt;
    &lt;app-footer-car :clock="clock" :propsText="{...propsText}"/&gt;
   &lt;/div&gt;
 
import appFooterCar from "../FooterCarList/FooterCarList";
data() {
  return {
   
   propsText:{
    seleTime:11,
    carsStart:22,
    carEnd:33,
    Remark:44,
    confirmationCar:55
 
   }
  };

Supplementary knowledge:vue props attribute value accepts multiple types

I won't say much nonsense, let's just read the code~

originalData: {
   type: Array | Object,
   default () {
    return []
   }
  }
  }
  ```

The above examples of multiple value transmissions at one time are all the content I share with you. I hope you can give you a reference and I hope you can support me more.