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 相关文章推荐
幻宇的层模拟窗口效果-提供演示和下载
Jan 20 Javascript
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
Sep 19 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
javascript事件模型介绍
May 31 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
javaScript如何跳出多重循环break、continue
Sep 01 Javascript
js实现带简单弹性运动的导航条
Feb 22 Javascript
SVG描边动画
Feb 23 Javascript
Vue infinite update loop的问题解决
Apr 23 Javascript
webpack中如何加载静态文件的方法步骤
May 18 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和MySQL保存和输出图片
2006/10/09 PHP
献给php初学者(入门学习经验谈)
2010/10/12 PHP
php设计模式 Observer(观察者模式)
2011/06/26 PHP
PHP模拟asp中response类实现方法
2015/08/08 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
写的htc的数据表格
2007/01/20 Javascript
JS定时关闭窗口的实例
2013/05/22 Javascript
JS文本框追加多个下拉框的值的简单实例
2013/07/12 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
js获取鼠标点击的位置实现思路及代码
2014/05/09 Javascript
jQuery使用animate创建动画用法实例
2015/08/07 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
2017/10/26 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
vue 项目build错误异常的解决方法
2019/04/22 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
零基础写python爬虫之抓取糗事百科代码分享
2014/11/06 Python
python中实现指定时间调用函数示例代码
2017/09/08 Python
详解python中的 is 操作符
2017/12/26 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
Python高并发和多线程有什么关系
2020/11/14 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
人事助理岗位职责
2013/11/18 职场文书
测控技术与仪器个人求职信范文
2013/12/30 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
宝塔更新Python及Flask项目的部署
2022/04/11 Python
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL