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的js分页代码
Jun 10 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
js中用window.open()打开多个窗口的name问题
Mar 13 Javascript
三种方式获取XMLHttpRequest对象
Apr 21 Javascript
在JavaScript中操作数组之map()方法的使用
Jun 09 Javascript
javascript表格的渲染组件
Jul 03 Javascript
javascript设置页面背景色及背景图片的方法
Dec 29 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
May 26 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
Jun 12 Javascript
从vue源码看props的用法
Jan 09 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 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
PHP中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
在视频前插入广告
2006/11/20 Javascript
Convert Seconds To Hours
2007/06/16 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
vue中appear的用法
2017/08/17 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
Python的lambda匿名函数的简单介绍
2013/04/25 Python
Python的标准模块包json详解
2017/03/13 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
运行Python编写的程序方法实例
2020/10/21 Python
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
巧克力蛋糕店创业计划书
2014/01/14 职场文书
平安建设实施方案
2014/03/19 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
2015年端午节活动总结
2015/02/11 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
python如何读取.mtx文件
2021/04/22 Python
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript