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 相关文章推荐
对JavaScript的eval()中使用函数的进一步讨论
Jul 26 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
Oct 11 Javascript
JQuery之proxy实现绑定代理方法
Aug 01 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
浅谈JavaScript作用域和闭包
Sep 18 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
js自定义trim函数实现删除两端空格功能
Feb 09 Javascript
JQuery元素快速查找与操作
Apr 22 jQuery
详解React中合并单元格的正确写法
Jan 08 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 Javascript
原生js实现移动小球(碰撞检测)
Dec 17 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
php创建多级目录代码
2008/06/05 PHP
PHP中如何调用webservice的实例参考
2013/04/25 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
ThinkPHP 在阿里云上的nginx.config配置实例详解
2017/10/11 PHP
php变量与字符串的增删改查操作示例
2020/05/07 PHP
jquery 弹出层实现代码
2009/10/30 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
jQuery读取和设定KindEditor值的方法
2013/11/22 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
详解jQuery选择器
2016/12/21 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
2017/04/04 jQuery
vue中appear的用法
2017/08/17 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
2018/01/09 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
opencv3/C++ 平面对象识别&amp;透视变换方式
2019/12/11 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
linux下进程间通信的方式
2014/12/23 面试题
分公司负责人任命书
2014/06/04 职场文书
新闻专业毕业生求职信
2014/08/08 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
团队拓展训练感想
2015/08/07 职场文书
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技