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 相关文章推荐
网页的标准,IMG不支持onload标签怎么办
Jun 29 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
JS生成随机打乱数组的方法示例
Dec 23 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 Javascript
jQuery解析json格式数据示例
Sep 01 jQuery
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 Javascript
vue从零实现一个消息通知组件的方法详解
Mar 16 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
vue如何使用rem适配
Feb 06 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实现通过照片获取ip地址
2016/04/26 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
用Juery网页选项卡实现代码
2011/06/13 Javascript
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
javascript学习笔记(一)基础知识
2014/09/30 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
webpack3之loader全解析
2017/10/26 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
koa router 多文件引入的方法示例
2019/05/22 Javascript
Python编写生成验证码的脚本的教程
2015/05/04 Python
Python中datetime常用时间处理方法
2015/06/15 Python
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
django 链接多个数据库 并使用原生sql实现
2020/03/28 Python
Keras实现DenseNet结构操作
2020/07/06 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
旅游安全协议书
2014/04/21 职场文书
创业培训计划书
2014/05/03 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
先进工作者事迹材料
2014/12/23 职场文书
英文商务邀请函范文
2015/01/31 职场文书
收入证明怎么写
2015/06/12 职场文书
golang DNS服务器的简单实现操作
2021/04/30 Golang
python用tkinter开发的扫雷游戏
2021/06/01 Python
python代码实现扫码关注公众号登录的实战
2021/11/01 Python