vue props 一次傳多個(gè)值實(shí)例
更新時(shí)間：2020年07月22日 14:55:34 作者：hua_ban_yu
這篇文章主要介紹了vue props 一次傳多個(gè)值實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
數(shù)組：
<custom-element :whatever="[...array]"></custom-element>
對(duì)象：
<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:{}
}
},
父組件：
<!-- 選擇內(nèi)容 -->
<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
}
};
補(bǔ)充知識(shí)：vue props 屬性值接受多個(gè)類型
我就廢話不多說(shuō)了，大家還是直接看代碼吧~
originalData: {
type: Array | Object,
default () {
return []
}
}
}
```
以上這篇vue props 一次傳多個(gè)值實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js允許自定義過(guò)濾器，過(guò)濾器的作用可被用于一些常見(jiàn)的文本格式化（也就是修飾文本，但是文本內(nèi)容不會(huì)改變），本文主要來(lái)和大家講講過(guò)濾器filters的使用，感興趣的可以了解一下2023-04-04
vite+vue3+element-plus搭建項(xiàng)目的踩坑記錄
這篇文章主要介紹了vite+vue3+element-plus搭建項(xiàng)目的踩坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue前端如何實(shí)現(xiàn)與后端進(jìn)行數(shù)據(jù)交互
這篇文章主要介紹了Vue前端如何實(shí)現(xiàn)與后端進(jìn)行數(shù)據(jù)交互，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了Vue之Mixins(混入)的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vue進(jìn)行數(shù)據(jù)可視化圖表展示的實(shí)現(xiàn)示例
數(shù)據(jù)可視化是現(xiàn)代化的數(shù)據(jù)分析和展示方式,可以使數(shù)據(jù)更加直觀、易于理解和傳達(dá),Vue作為一款流行的前端框架,提供了豐富的插件和工具來(lái)實(shí)現(xiàn)數(shù)據(jù)可視化圖表展示,本文將介紹如何使用Vue和Echarts/D3.js來(lái)實(shí)現(xiàn)數(shù)據(jù)可視化圖表展示,并提供示例代碼和實(shí)際應(yīng)用場(chǎng)景2023-10-10
Vue+ElementUI使用vue-pdf實(shí)現(xiàn)預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了Vue+ElementUI使用vue-pdf實(shí)現(xiàn)預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
vue中el-autocomplete支持分頁(yè)上拉加載功能
最近在項(xiàng)目中使用了ElementUI的el-autocomplete,下面這篇文章主要介紹了vue中el-autocomplete支持分頁(yè)上拉加載功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
開(kāi)發(fā)中遇到bug是在正常不過(guò)了,而程序也基本都是bug堆里爬出來(lái)的,對(duì)于程序員來(lái)說(shuō)bug調(diào)試也是自己工作的重要組成部分,下面這篇文章主要給大家介紹了關(guān)于Vue環(huán)境搭建報(bào)錯(cuò)整理的相關(guān)資料,需要的朋友可以參考下2022-08-08
詳解vue-cli快速構(gòu)建項(xiàng)目以及引入bootstrap、jq
本篇文章主要介紹了vue-cli快速構(gòu)建項(xiàng)目以及引入bootstrap、jq，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要為大家詳細(xì)介紹了vue移動(dòng)端的左右滑動(dòng)事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06