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 命名空间以提高代码重用性
Nov 13 Javascript
Prototype Selector对象学习
Jul 23 Javascript
JSON 入门指南 想了解json的朋友可以看下
Aug 26 Javascript
jQuery 表单验证扩展代码(一)
Oct 11 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
JS简单实现元素复制示例附图
Nov 19 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
May 09 Javascript
Javascript中String的常用方法实例分析
Jun 13 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
js实现带简单弹性运动的导航条
Feb 22 Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 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
javascript 小型动画组件与实现代码
2010/06/02 PHP
destoon之一键登录设置
2014/06/21 PHP
给PHP开发者的编程指南 第一部分降低复杂程度
2016/01/18 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
常用jQuery选择器总结
2014/07/11 Javascript
jQuery事件绑定与解除绑定实现方法
2015/04/15 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
jQuery Form表单取值的方法
2017/01/11 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
JS实现简单打字测试
2020/06/24 Javascript
Python守护进程和脚本单例运行详解
2017/01/06 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
HTML5学习笔记之History API
2015/02/26 HTML / CSS
柯基袜:Corgi Socks
2017/01/26 全球购物
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
军训自我鉴定
2014/01/22 职场文书
特色冷饮店创业计划书
2014/01/28 职场文书
《猫》教学反思
2014/02/26 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
行政专员求职信范文
2014/05/03 职场文书
运动会拉拉队口号
2014/06/09 职场文书
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery