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 相关文章推荐
如何让div span等元素能响应键盘事件操作指南
Nov 13 Javascript
js禁止document element对象选中文本实现代码
Mar 21 Javascript
jquery 关于event.target使用的几点说明介绍
Apr 26 Javascript
js内存泄露的几种情况详细探讨
May 31 Javascript
使用闭包对setTimeout进行简单封装避免出错
Jul 10 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
Feb 24 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
关于动态执行代码(js的Eval)实例详解
Aug 15 Javascript
微信小程序上传图片实例
May 28 Javascript
JS中的变量作用域(console版)
Jul 18 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的FTP学习(二)[转自奥索]
2006/10/09 PHP
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
Javascript 事件流和事件绑定
2009/07/16 Javascript
基于jquery的表格排序
2010/09/11 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
使用PYTHON接收多播数据的代码
2012/03/01 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
django用户登录和注销的实现方法
2018/07/16 Python
浅谈python常用程序算法
2019/03/22 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
利用python-docx模块写批量生日邀请函
2019/08/26 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
linux面试相关问题
2012/08/11 面试题
医学生实习自荐信
2013/10/01 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
学雷锋标语
2014/06/25 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
办公楼租房协议书范本
2014/11/25 职场文书
龙门石窟导游词
2015/02/02 职场文书
志愿者工作心得体会
2016/01/15 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL
解析Java异步之call future
2021/06/14 Java/Android
html form表单基础入门案例讲解
2021/07/15 HTML / CSS