网络编程
位置：首页>> 网络编程>> JavaScript>> vue props 一次传多个值实例

vue props 一次传多个值实例

作者：hua_ban_yu　　发布时间：2024-05-03 15:10:32　

标签：vue,props,传值

数组：

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

对象：

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

或者：

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

子组件：


<ul class="car_wrap">
  <li >
   <span>
    <i class="fa fa-clock-o clock_icon" aria-hidden="true"></i>
   </span>
   <p>{{propsText.seleTime}}</p>
  </li>
  <li class="car_start">
   <span>
    <i class="fa fa-circle circle_icon" aria-hidden="true"></i>
   </span>
   <p>{{propsText.carsStart}}</p>
  </li>
  <li class="car_end">
   <span>
    <i class="fa fa-circle circle_icon" aria-hidden="true"></i>
   </span>
   <p>{{propsText.carEnd}}</p>
  </li>
  <li class="remark">
   <span>
    <i class="fa fa-circle circle_icon" aria-hidden="true"></i>
   </span>
   <p>{{propsText.Remark}}</p>
  </li>
 </ul>
 <div class="confirmation_car">

props: {

propsText:{
  type: Object,
  default:{}
 }
},

父组件：


<!-- 选择内容 -->
  <div class="select_content">
   <app-footer-car :clock="clock" :propsText="{...propsText}"/>
  </div>

import appFooterCar from "../FooterCarList/FooterCarList";
data() {
 return {

propsText:{
   seleTime:11,
   carsStart:22,
   carEnd:33,
   Remark:44,
   confirmationCar:55

}
 };

补充知识：vue props 属性值接受多个类型

我就废话不多说了，大家还是直接看代码吧~


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

来源：https://blog.csdn.net/hua_ban_yu/article/details/80263911

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com