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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
超级退弹代码
Jul 07 Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
jQuery中大家不太了解的几个方法
Mar 04 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 Javascript
js实现不重复导入的方法
Mar 02 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
vue实现微信分享功能
Nov 28 Javascript
js实现简单图片拖拽效果
Feb 22 Javascript
前端学习——JavaScript原生实现购物车案例
Mar 31 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
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
解析PHP留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
php 5.6版本中编写一个PHP扩展的简单示例
2015/01/20 PHP
php抽象类用法实例分析
2015/07/07 PHP
PHP图像裁剪缩略裁切类源码及使用方法
2016/01/07 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
二级域名或跨域共享Cookies的实现方法
2008/08/07 Javascript
extjs fckeditor集成代码
2009/05/10 Javascript
JS 中document.URL 和 windows.location.href 的区别
2009/11/11 Javascript
用Javascript评估用户输入密码的强度实现代码
2011/11/30 Javascript
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
SinaEditor使用方法详解
2013/12/28 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
JS弹性运动实现方法分析
2016/12/15 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
详解vue-cli 构建Vue项目遇到的坑
2017/08/30 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
vue 实现图片懒加载功能
2020/12/31 Vue.js
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python实现豆瓣图片下载的方法
2015/05/25 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
PHP高级工程师面试问题推荐
2013/01/18 面试题
法学专业应届生求职信
2013/10/16 职场文书
年度考核自我鉴定
2014/03/19 职场文书
精神文明单位申报材料
2014/05/02 职场文书
英语专业求职信
2014/07/08 职场文书
建议书格式
2015/02/04 职场文书
会议通知
2015/04/15 职场文书
重阳节简报
2015/07/20 职场文书