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 插件学习实例1 插件制作说明与tableUI优化
Apr 02 Javascript
jquery动态添加option示例
Dec 30 Javascript
javascript中attribute和property的区别详解
Jun 05 Javascript
浅谈JavaScript中的对象及Promise对象的实现
Nov 15 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
Aug 01 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
vue页面跳转后返回原页面初始位置方法
Feb 11 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
Vuex的实战使用详解
Oct 31 Javascript
基于js判断浏览器是否支持webGL
Apr 18 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
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
计数器详细设计
2006/10/09 PHP
php设计模式 Strategy(策略模式)
2011/06/26 PHP
PHP error_log()将错误信息写入一个文件(定义和用法)
2013/10/25 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
php similar_text()函数的定义和用法
2016/05/12 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
EXT中xtype的含义分析
2010/01/07 Javascript
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
vue keep-alive请求数据的方法示例
2018/05/16 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
python实现根据图标提取分类应用程序实例
2014/09/28 Python
python实现控制台打印的方法
2019/01/12 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
构建高效的python requests长连接池详解
2020/05/02 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
行政主管岗位职责
2013/11/18 职场文书
高中自我评价范文
2014/01/27 职场文书
交通事故协议书范文
2014/04/16 职场文书
六一亲子活动总结
2014/07/01 职场文书
停电调休通知
2015/04/16 职场文书
消防安全主题班会
2015/08/12 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书
php中配置文件保存修改操作 如config.php文件的读取修改等操作
2021/05/12 PHP
CSS实现渐变色边框(Gradient borders)的5种方法
2022/03/25 HTML / CSS