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 相关文章推荐
屏蔽网页右键复制和ctrl+c复制的js代码
Jan 04 Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
Jun 13 Javascript
javascript实现完美拖拽效果
May 06 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
Angular实现表单验证功能
Nov 13 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 Javascript
小程序和web画三角形实现解析
Sep 02 Javascript
简单谈谈javascript高级特性
Sep 04 Javascript
原生JS实现微信通讯录
Jun 18 Javascript
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
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
我的论坛源代码(十)
2006/10/09 PHP
php操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
php模拟js函数unescape的函数代码
2012/10/20 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
javascript 表单验证常见正则
2009/09/28 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
基于DOM节点删除之empty和remove的区别(详解)
2017/09/11 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
Python中的模块和包概念介绍
2015/04/13 Python
python匿名函数用法实例分析
2019/08/03 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
2019/12/26 Python
python中threading开启关闭线程操作
2020/05/02 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
天巡全球:Skyscanner Global
2017/06/20 全球购物
台湾生鲜宅配:大口市集
2017/10/14 全球购物
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
应用艺术专业个人的自我评价
2014/01/03 职场文书
欢迎家长标语
2014/10/08 职场文书
小学运动会宣传稿
2015/07/23 职场文书
治理商业贿赂工作总结
2015/08/10 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python