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 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
深入理解JavaScript中Ajax
Aug 02 Javascript
利用JQuery阻止事件冒泡
Dec 01 Javascript
JavaScript内存泄漏的处理方式
Nov 20 Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
解决layui 表单元素radio不显示渲染的问题
Sep 04 Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 Javascript
vue+axios 拦截器实现统一token的案例
Sep 11 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
Oct 02 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代码
2013/12/03 PHP
PHP函数http_build_query使用详解
2014/08/20 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
js资料toString 方法
2007/03/13 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
[58:58]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第二场
2018/04/05 DOTA
Python NumPy库安装使用笔记
2015/05/18 Python
python生成式的send()方法(详解)
2017/05/08 Python
利用python模拟实现POST请求提交图片的方法
2017/07/25 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
SmartBuyGlasses意大利:购买太阳镜、眼镜和隐形眼镜
2018/11/20 全球购物
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
计算机专业毕业生推荐信
2013/11/25 职场文书
任命书怎么写
2014/06/04 职场文书
2014四风问题对照检查材料范文
2014/09/15 职场文书
酒桌上的开场白
2015/06/01 职场文书
迎国庆主题班会
2015/08/17 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
素质教育培训心得体会
2016/01/19 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
Python+tkinter实现高清图片保存
2022/03/13 Python
方法汇总:Python 安装第三方库常用
2022/04/26 Python