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中插件实现自动添加用户的具体代码
Nov 15 Javascript
搭建pomelo 开发环境
Jun 24 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
AngularJs  Creating Services详解及示例代码
Sep 02 Javascript
JSON对象转化为字符串详解
Aug 11 Javascript
vue 父组件调用子组件方法及事件
Mar 29 Javascript
详细分析JavaScript中的深浅拷贝
Sep 17 Javascript
利用js canvas实现五子棋游戏
Oct 11 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/09/07 PHP
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
深入理解js promise chain
2016/05/05 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
vue界面发送表情的实现代码
2020/09/11 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
python中使用mysql数据库详细介绍
2015/03/27 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
SmartBuyGlasses比利时:购买品牌太阳镜和眼镜
2019/08/09 全球购物
西班牙用户之间买卖视频游戏的平台:Wakkap
2020/03/21 全球购物
小露珠教学反思
2014/04/30 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
感恩教育主题班会
2015/08/12 职场文书
《黄道婆》教学反思
2016/02/22 职场文书
Win11 S Mode版本泄露 正式上线后叫做Windows 11 SE
2021/11/21 数码科技