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 相关文章推荐
node.js WEB开发中图片验证码的实现方法
Jun 03 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
May 12 Javascript
JS+CSS实现的蓝色table选项卡效果
Oct 08 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
js 获取元素所有兄弟节点的实现方法
Sep 06 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
详解redux异步操作实践
Aug 15 Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 Javascript
在vue+element ui框架里实现lodash的debounce防抖
Nov 13 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 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/05/02 PHP
php实现通过ftp上传文件
2015/06/19 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
JavaScript 字符串与数组转换函数[不用split与join]
2009/12/13 Javascript
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
Python实现文件复制删除
2016/04/19 Python
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
在java中如何定义一个抽象属性示例详解
2017/08/18 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
Python3 合并二叉树的实现
2019/09/30 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
英国女装网上商店:I Saw It First
2018/10/18 全球购物
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
以下的初始化有什么区别
2013/12/16 面试题
《伯牙绝弦》教学反思
2014/03/02 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
幼儿园语言教学反思
2016/02/23 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书
PHP遍历数组的6种方式总结
2021/11/17 PHP
德生BCL3000抢先使用感受和评价
2022/04/07 无线电
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS