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 相关文章推荐
JavaScript中的this实例分析
Apr 28 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
Jul 01 Javascript
AngularJs中route的使用方法和配置
Feb 04 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
Jun 14 Javascript
JavaScript SHA512加密算法详细代码
Oct 06 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
js模块加载方式浅析
Aug 12 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
Nov 09 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
在线短消息收发的程序,不用数据库
2006/10/09 PHP
PHP5函数小全(分享)
2013/06/06 PHP
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
学习YUI.Ext第五日--做拖放Darg&amp;Drop
2007/03/10 Javascript
JQuery从头学起第二讲
2010/07/04 Javascript
Jquery中dialog属性小记
2010/09/03 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
js实现防止被iframe的方法
2015/07/03 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
python对视频画框标记后保存的方法
2018/12/07 Python
如何更优雅地写python代码
2019/07/02 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
SQL面试题
2013/04/30 面试题
临床医学专业个人的自我评价
2013/09/27 职场文书
机电工程专业应届生求职信
2013/10/03 职场文书
买房委托公证书
2014/04/08 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
详解php中流行的rpc框架
2021/05/29 PHP