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.each()用法分享
Jul 31 Javascript
基于jQuery的简单九宫格实现代码
Aug 09 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 Javascript
javascript简单进制转换实现方法
Nov 24 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
JQuery扩展对象方法操作示例
Aug 21 jQuery
使用layer弹窗,制作编辑User信息页面的方法
Sep 27 Javascript
Vue中图片Src使用变量的方法
Oct 30 Javascript
微信小程序如何实现radio单选框单击打勾和取消
Jan 21 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 xml文件操作实现代码(二)
2009/03/20 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
javascript web对话框与弹出窗口
2009/02/22 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
2016/07/18 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
进阶之初探nodeJS
2017/01/24 NodeJs
基于jQuery的表单填充实例
2017/08/22 jQuery
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
详解vue中axios的封装
2018/07/18 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
python字符串替换示例
2014/04/24 Python
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
Python安装模块的常见问题及解决方法
2018/02/05 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
Selenium及python实现滚动操作多种方法
2020/07/21 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
数学教学随笔感言
2014/02/17 职场文书
保护环境的标语
2014/06/09 职场文书
典型事迹材料范文
2014/12/29 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书
python not运算符的实例用法
2021/06/30 Python
SQL Server内存机制浅探
2022/04/06 SQL Server