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 hasOwnProperty 方法 &amp; in 关键字
Nov 26 Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
浅析JavaScript中的隐式类型转换
Dec 05 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
react native实现往服务器上传网络图片的实例
Aug 07 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 Javascript
javascript原型链学习记录之继承实现方式分析
May 01 Javascript
vue实现axios图片上传功能
Aug 20 Javascript
在Webpack中用url-loader处理图片和字体的问题
Apr 28 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调用Java对象的方法
2006/10/09 PHP
PHP 数据结构 算法 三元组 Triplet
2011/07/02 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
jquery iframe操作详细解析
2013/11/20 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
vue-router中的hash和history两种模式的区别
2018/07/17 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
2019/04/09 Javascript
Antd表格滚动 宽度自适应 不换行的实例
2020/10/27 Javascript
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
谈一谈基于python的面向对象编程基础
2019/05/21 Python
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
架构师岗位职责
2013/11/18 职场文书
优秀的自荐信要注意哪些
2014/01/03 职场文书
致全体运动员广播稿
2014/02/01 职场文书
售后服务经理岗位职责
2014/02/25 职场文书
求职面试个人自我评价
2014/02/28 职场文书
投标担保书范文
2014/04/02 职场文书
《荷花》教学反思
2014/04/16 职场文书
物理学专业自荐信
2014/06/11 职场文书
十八大宣传标语
2014/10/09 职场文书
《中彩那天》教学反思
2016/02/24 职场文书
检讨书格式
2019/04/25 职场文书
go xorm框架的使用
2021/05/22 Golang