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 相关文章推荐
flash 得到自身url参数的代码
Nov 15 Javascript
在JavaScript中监听IME键盘输入事件
May 29 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
Apr 26 Javascript
JavaScript中常用的六种互动方法示例
Mar 13 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
React简单介绍
May 24 Javascript
JavaScript的六种继承方式(推荐)
Jun 26 Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 Javascript
详解vue3.0 diff算法的使用(超详细)
Jul 01 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中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
深入PHP数据缓存的使用说明
2013/05/10 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
再谈javascript原型继承
2014/11/10 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
python实现简单购物商城
2016/05/21 Python
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
python自动裁剪图像代码分享
2017/11/25 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
python设置随机种子实例讲解
2019/09/12 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
python实现斗地主分牌洗牌
2020/06/22 Python
Python执行时间的几种计算方法
2020/07/31 Python
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
网站出售协议书范文
2014/10/10 职场文书
打架赔偿协议书范本
2014/10/26 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
环保宣传语大全
2015/07/13 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL