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è)類(lèi)型

我就廢話(huà)不多說(shuō)了，大家還是直接看代碼吧~

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

以上這篇vue props 一次傳多個(gè)值實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue項(xiàng)目如何通過(guò)url鏈接引入其他系統(tǒng)頁(yè)面
這篇文章主要介紹了vue項(xiàng)目如何通過(guò)url鏈接引入其他系統(tǒng)頁(yè)面問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue-resource 攔截器（interceptor）的使用詳解
本篇文章主要介紹了vue-resource 攔截器（interceptor）的使用詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
解決vue 使用axios.all()方法發(fā)起多個(gè)請(qǐng)求控制臺(tái)報(bào)錯(cuò)的問(wèn)題
這篇文章主要介紹了解決vue 使用axios.all()方法發(fā)起多個(gè)請(qǐng)求控制臺(tái)報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
Vue循環(huán)組件加validate多表單驗(yàn)證的實(shí)例
今天小編就為大家分享一篇Vue循環(huán)組件加validate多表單驗(yàn)證的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue中關(guān)于element的el-image 圖片預(yù)覽功能增加一個(gè)下載按鈕(操作方法)
這篇文章主要介紹了vue中關(guān)于element的el-image 圖片預(yù)覽功能增加一個(gè)下載按鈕,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-04-04
Vue處理循環(huán)數(shù)據(jù)流程示例精講
這篇文章主要介紹了Vue處理循環(huán)數(shù)據(jù)流程，這個(gè)又是一個(gè)編程語(yǔ)言，?模版語(yǔ)法里面必不可少的一個(gè)，?也是使用業(yè)務(wù)場(chǎng)景使用最多的一個(gè)環(huán)節(jié)。所以學(xué)會(huì)使用循環(huán)也是重中之重了
2023-04-04
vue中解決el-date-picker更改樣式不生效問(wèn)題
在使用Vue.js進(jìn)行前端開(kāi)發(fā)的過(guò)程中,Element?UI?是一個(gè)非常流行的UI庫(kù),它提供了一套完整的組件來(lái)快速搭建美觀(guān)的用戶(hù)界面,但是我們經(jīng)常遇到一個(gè)問(wèn)題使用Element?UI提供的el-date-picker組件時(shí),嘗試自定義其樣式卻無(wú)法生效,所以本文給大家介紹如何解決這個(gè)問(wèn)題
2024-10-10
vuex數(shù)據(jù)狀態(tài)持久化問(wèn)題
這篇文章主要介紹了vuex數(shù)據(jù)狀態(tài)持久化問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
淺析vue3響應(yīng)式數(shù)據(jù)與watch屬性
這篇文章主要介紹了vue3響應(yīng)式數(shù)據(jù)與watch屬性的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2022-05-05
vue打包優(yōu)化時(shí)配置webpack的8大方案小結(jié)
vue-cli?生成的項(xiàng)目通常集成Webpack?,在打包的時(shí)候,需要webpack來(lái)做一些事情,這里我們希望它可以壓縮代碼體積,提高運(yùn)行效率,本文為大家整理了8大webpack配置方案,希望對(duì)大家有所幫助
2024-02-02