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 相关文章推荐
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
Nov 21 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 Javascript
简述jQuery Easyui一些用法
Aug 01 jQuery
vue通过video.js解决m3u8视频播放格式的方法
Jul 30 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 Javascript
Vue项目接入Paypal实现示例详解
Jun 04 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 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
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
PHP memcache扩展的三种安装方法
2009/04/26 PHP
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
PHP面向对象教程之自定义类
2014/06/10 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
基于jquery的tab切换 js原理
2010/04/01 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
2013/06/28 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
jquery中EasyUI实现异步树
2015/03/01 Javascript
AngularJS过滤器filter用法总结
2016/12/13 Javascript
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
微信小程序实现发微博功能的示例代码
2020/06/24 Javascript
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
python实现杨辉三角思路
2017/07/14 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
详解Python绘图Turtle库
2019/10/12 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
python实现简单猜单词游戏
2020/12/24 Python
大学生应聘推荐信范文
2013/11/19 职场文书
女生抽烟检讨书
2014/10/05 职场文书
暖春观后感
2015/06/08 职场文书
redis三种高可用方式部署的实现
2021/05/11 Redis
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python
Java 在生活中的 10 大应用
2021/11/02 Java/Android