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 相关文章推荐
用js判断用户浏览器是否是XP SP2的IE6
Mar 08 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
Nov 26 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
jQuery的end()方法使用详解
Jul 15 Javascript
JS实现选项卡实例详解
Nov 17 Javascript
JS实现的倒计时效果实例(2则实例)
Dec 23 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
Jun 22 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
seajs下require书写约定实例分析
May 16 Javascript
jQuery插件jsonview展示json数据
May 26 jQuery
React-vscode使用jsx语法的问题及解决方法
Jun 21 Javascript
JS实现九宫格拼图游戏
Jun 28 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
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
一个简单的php加密解密函数(动态加密)
2013/06/19 PHP
完美解决PHP中的Cannot modify header information 问题
2013/08/12 PHP
php去除HTML标签实例
2013/11/06 PHP
总结对比php中的多种序列化
2016/08/28 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
js实现在网页上简单显示时间的方法
2015/03/02 Javascript
常用DOM整理
2015/06/16 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
2016/07/11 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
python八皇后问题的解决方法
2018/09/27 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
python如何爬取网页中的文字
2020/07/28 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
农村婚礼证婚词
2014/01/08 职场文书
公司庆典活动邀请函
2014/01/09 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
实验室安全管理制度
2015/08/05 职场文书
“学党章、守党纪、讲党规”学习心得体会
2016/01/14 职场文书
导游词之吉林花园山
2019/10/17 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
Opencv中cv2.floodFill算法的使用
2021/06/18 Python