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 相关文章推荐
11个用于提高排版水平的基于jquery的文字效果插件
Sep 14 Javascript
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 Javascript
基于JS实现类似支付宝支付密码输入框
Sep 02 Javascript
ES6新特性之函数的扩展实例详解
Apr 01 Javascript
Vue非父子组件通信详解
Jun 12 Javascript
vue better-scroll插件使用详解
Jan 25 Javascript
详解swipe使用及竖屏页面滚动方法
Jun 28 Javascript
浅谈一个webpack构建速度优化误区
Jun 24 Javascript
JavaScript定时器使用方法详解
Mar 26 Javascript
详解JavaScript中的执行上下文及调用堆栈
Apr 29 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中变量及部分适用方法
2008/03/27 PHP
php MsSql server时遇到的中文编码问题
2009/06/11 PHP
浅析php单例模式
2014/11/25 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
Laravel手动返回错误码示例
2019/10/22 PHP
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
JavaScript将数据转换成整数的方法
2014/01/04 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
关于iframe跨域POST提交的方法示例
2017/01/15 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
Python中的 enum 模块源码详析
2019/01/09 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
Python partial函数原理及用法解析
2019/12/11 Python
python装饰器代码深入讲解
2021/03/01 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
英国探险旅游专家:Explore
2018/12/20 全球购物
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
Optimalprint加拿大:在线打印服务
2020/04/03 全球购物
美国在线家具网站:GDFStudio
2021/03/13 全球购物
夜大毕业生自我评价分享
2013/11/10 职场文书
六一儿童节主持词
2014/03/21 职场文书
贷款委托书范本
2014/04/08 职场文书
给孩子的新年寄语
2014/04/08 职场文书
2014年教师教学工作总结
2014/11/08 职场文书