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 相关文章推荐
jquery 将disabled的元素置为enabled的三种方法
Jul 25 Javascript
Javascript表格翻页效果的具体实现
Oct 05 Javascript
jQuery获取cookie值及删除cookie用法实例
Apr 15 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 Javascript
详解vue数据渲染出现闪烁问题
Jun 29 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
浅谈Vue.js中的v-on(事件处理)
Sep 05 Javascript
react-native-tab-navigator组件的基本使用示例代码
Sep 07 Javascript
JavaScript 中的无穷数(Infinity)详解
Feb 13 Javascript
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
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
ExtJS TabPanel beforeremove beforeclose使用说明
2010/03/31 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
JavaScript中的工厂函数(推荐)
2017/03/08 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
JS中去掉array中重复元素的方法
2017/05/26 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
[41:37]DOTA2北京网鱼队选拔赛——冲击职业之路
2015/04/13 DOTA
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10
2020/12/12 DOTA
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
Python中字典和JSON互转操作实例
2015/01/19 Python
解决Python requests 报错方法集锦
2017/03/19 Python
Python微信库:itchat的用法详解
2017/08/14 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
Python高级特性切片(Slice)操作详解
2018/09/27 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
瑞典时尚耳机品牌:Urbanears
2017/07/26 全球购物
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
别名指示符是什么
2012/10/08 面试题
抄作业检讨书
2014/02/17 职场文书
负责人任命书范本
2014/06/04 职场文书
2014年小学图书室工作总结
2014/12/09 职场文书
redis缓存存储Session原理机制
2021/11/20 Redis