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 相关文章推荐
jquery基础教程之数组使用详解
Mar 10 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
Jul 01 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
Jan 13 Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
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
解析如何用php screw加密php源代码
2013/06/20 PHP
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
JavaScript中常用的运算符小结
2012/01/18 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
jQuery基本选择器之标签名选择器
2016/09/03 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
使用Python实现在Windows下安装Django
2018/10/17 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
python flask安装和命令详解
2019/04/02 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
Python如何读写字节数据
2020/08/05 Python
澳洲的服装老品牌:SABA
2018/02/06 全球购物
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
为数据库创建索引都需要注意些什么
2012/07/17 面试题
JSF的标签库有哪些
2012/04/27 面试题
个人素质的自我评价分享
2013/12/16 职场文书
2014年教师节寄语
2014/08/11 职场文书
离婚起诉书范本
2015/05/18 职场文书
珍爱生命主题班会
2015/08/13 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书