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 相关文章推荐
JS BASE64编码 window.atob(), window.btoa()
Mar 09 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
js对文章内容进行分页示例代码
Mar 05 Javascript
JavaScript中switch判断容易犯错的一个细节
Aug 27 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
Sep 26 Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 Javascript
Javascript中的对象和原型(二)
Aug 12 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 Javascript
koa+jwt实现token验证与刷新功能
May 30 Javascript
vue-cli随机生成port源码的方法
Sep 02 Javascript
js实现双人五子棋小游戏
May 28 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 htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
微信小程序 数据访问实例详解
2016/10/08 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
详解在Vue中有条件地使用CSS类
2017/09/30 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
python里对list中的整数求平均并排序
2014/09/12 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
pip安装python库的方法总结
2019/08/02 Python
python向图片里添加文字
2019/11/26 Python
Pytorch释放显存占用方式
2020/01/13 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
python lambda的使用详解
2021/02/26 Python
NFL加拿大官方网上商店:NHLShop.ca
2019/03/12 全球购物
运动会稿件300字
2014/02/14 职场文书
2015世界地球日活动总结
2015/02/09 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL
Python+tkinter实现高清图片保存
2022/03/13 Python