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获取浏览器中的分辨率实现代码
Apr 23 Javascript
JavaScript的各种常见函数定义方法
Sep 16 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
jQuery实现表格展开与折叠的方法
May 04 Javascript
jQuery Dialog对话框事件用法实例分析
May 10 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
Angular排序实例详解
Jun 28 Javascript
Vue2.0 vue-source jsonp 跨域请求
Aug 04 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
Apr 18 Javascript
mpvue实现微信小程序快递单号查询代码
Apr 03 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中计算时间差的几种方法
2009/12/31 PHP
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
php代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
深入浅出php socket编程
2015/05/13 PHP
点图片上一页下一页翻页效果
2008/07/09 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
Jquery easyui 下loaing效果示例代码
2013/08/12 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
vue-router传递参数的几种方式实例详解
2018/11/13 Javascript
vue2.x数组劫持原理的实现
2020/04/19 Javascript
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
Python科学计算之Pandas详解
2017/01/15 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
详解Python3注释知识点
2019/02/19 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
python中append实例用法总结
2019/07/30 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
Pyqt5自适应布局实例
2019/12/13 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
通信工程毕业生自荐信
2013/11/01 职场文书
编辑找工作求职信分享
2014/01/03 职场文书
《落花生》教学反思
2014/02/25 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
2015年招生工作总结
2015/05/04 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书