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 相关文章推荐
js实现网页标题栏闪烁提示效果实例分析
Nov 20 Javascript
jQuery语法小结(超实用)
Dec 31 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
JavaScript是如何实现继承的(六种方式)
Mar 31 Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 Javascript
打造自己的jQuery插件入门教程
Sep 23 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
Auto.js自动收取自己和好友蚂蚁森林能量脚本
Jun 28 Javascript
vue中配置scss全局变量的步骤
Dec 28 Vue.js
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实现paypal整合方法
2010/11/28 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
JavaScript实现斗地主游戏的思路
2016/02/29 Javascript
浅析JavaScript Array和string的转换(推荐)
2016/05/20 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
2016/09/05 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
第一个Vue插件从封装到发布
2017/11/22 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
浅谈Python的异常处理
2016/06/19 Python
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
Python tkinter三种布局实例详解
2020/01/06 Python
Python之字典对象的几种创建方法
2020/09/30 Python
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
优秀团员个人的自我评价
2013/10/02 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
年终晚会活动方案
2014/08/21 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
2014年社区工作总结
2014/11/18 职场文书
关于学习的决心书
2015/02/05 职场文书
大学生英文求职信范文
2015/03/19 职场文书
员工手册董事长致辞
2015/07/29 职场文书
办公室规章制度范本
2015/08/04 职场文书
大学生社会服务心得体会
2016/01/22 职场文书
化工生产实习心得体会
2016/01/22 职场文书