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 []
}
}
}
```
以上這篇vue props 一次傳多個值實例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue-resource 攔截器(interceptor)的使用詳解
本篇文章主要介紹了vue-resource 攔截器(interceptor)的使用詳解,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
解決vue 使用axios.all()方法發(fā)起多個請求控制臺報錯的問題
這篇文章主要介紹了解決vue 使用axios.all()方法發(fā)起多個請求控制臺報錯的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue循環(huán)組件加validate多表單驗證的實例
今天小編就為大家分享一篇Vue循環(huán)組件加validate多表單驗證的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue中關于element的el-image 圖片預覽功能增加一個下載按鈕(操作方法)
這篇文章主要介紹了vue中關于element的el-image 圖片預覽功能增加一個下載按鈕,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04

