vue prop属性传值与传引用示例


Posted in Javascript onNovember 13, 2019

vue组件在prop里根据type决定传值还是传引用。

简要如下:

传值:String、Number、Boolean

传引用:Array、Object

若想将数组或对象类型也以值形式传递怎么办呢?如下方式可以实现:

// component-A 引用component-B组件
<component-B :person="personList" 
       :personBak="person_Bak">
</component-B>
 
 
// component-A 部分关键代码
 
// 将数组复制,personBak与personList是两个“内容”相同但地址不一样的对象(数组),
// 这样可以变相的实现“传值”,person或personBak互不影响
person_Bak = JSON.parse(JSON.stringfy(this.personList));  
 
 
//component-B props部分
props: {
  person: {
    type: Object,
    default: {}
  },
  personBak: {
    type: Object,
    default: {}
  }
}

以上这篇vue prop属性传值与传引用示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
20个非常有用的PHP类库 加速php开发
Jan 15 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
Javascript 浮点运算的问题分析与解决方法
Aug 27 Javascript
js获取多个tagname的节点数组
Sep 22 Javascript
Textarea根据内容自适应高度
Oct 28 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
js中将String转换为number以便比较
Jul 08 Javascript
Javascript vue.js表格分页,ajax异步加载数据
Oct 24 Javascript
React教程之封装一个Portal可复用组件的方法
Jan 02 Javascript
小程序tab页无法传递参数的方法
Aug 03 Javascript
echarts统计x轴区间的数值实例代码详解
Jul 07 Javascript
jQuery实时统计输入框字数及限制
Jun 24 jQuery
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 #Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 #Javascript
Jquery异步上传文件代码实例
Nov 13 #jQuery
解决ele ui 表格表头太长问题的实现
Nov 13 #Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 #Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 #Javascript
JavaScript数组及常见操作方法小结
Nov 13 #Javascript
You might like
php自动适应范围的分页代码
2008/08/05 PHP
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
JQquery的一些使用心得分享
2012/08/01 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
浅谈Node.js:Buffer模块
2016/12/05 Javascript
微信小程序开发(二)图片上传+服务端接收详解
2017/01/11 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
一百多行python代码实现抢票助手
2018/09/25 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
pycharm全局搜索的具体步骤
2020/07/28 Python
详解Python中第三方库Faker
2020/09/25 Python
十佳青年个人事迹材料
2014/01/28 职场文书
学生请假条
2014/04/11 职场文书
品质口号大全
2014/06/17 职场文书
殡葬服务心得体会
2014/09/11 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
走群众路线学习心得体会
2014/10/31 职场文书
违反学校规则制度检讨书
2015/01/01 职场文书
毕业生自荐信范文
2015/03/05 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
详解Python内置模块Collections
2022/03/22 Python