vue props 一次传多个值实例


Posted in Javascript onJuly 22, 2020

数组:

<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 一次传多个值实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
Oct 03 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
May 14 Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
js加入收藏以及使用Jquery更改透明度
Jan 26 Javascript
JavaScript制作的可折叠弹出式菜单示例
Apr 04 Javascript
Javascript玩转继承(二)
May 08 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
微信小程序实现轮播图效果
Sep 07 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
Jul 22 #Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 #Javascript
解决Vue router-link绑定事件不生效的问题
Jul 22 #Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 #Javascript
vue页面跳转实现页面缓存操作
Jul 22 #Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 #Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 #Javascript
You might like
session在php5.3中的变化 session_is_registered() is deprecated in
2013/11/12 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
JS加ASP二级域名转向的代码
2007/05/17 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
Javascript实现鼠标框选操作  不是点击选取
2016/04/14 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
jquery学习笔记之无new构建详解
2017/12/07 jQuery
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
Python中基本的日期时间处理的学习教程
2015/10/16 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
python中wx模块的具体使用方法
2020/05/15 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
党支部书记先进事迹
2014/01/17 职场文书
会计专业职业规划:规划自我赢取未来
2014/02/12 职场文书
人力资源职位说明书
2014/07/29 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
承诺书范本
2015/01/21 职场文书
医院合作意向书范本
2015/05/08 职场文书
小学秋季运动会加油口号及加油稿
2019/08/19 职场文书
导游词之湖北武当山
2019/09/23 职场文书
Django如何创作一个简单的最小程序
2021/05/12 Python