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 相关文章推荐
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
jQuery 1.8 Release版本发布了
Aug 14 Javascript
xml转json的js代码
Aug 28 Javascript
Javascript算符的优先级介绍
Mar 20 Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 Javascript
关于网页中的无缝滚动的js代码
Jun 09 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
JS使用Date对象实时显示当前系统时间简单示例
Aug 23 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
Syphon 秘笈
2021/03/03 冲泡冲煮
很实用的一个完整email发送程序
2006/10/09 PHP
php join函数应用
2011/05/04 PHP
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
PHP使用Curl实现模拟登录及抓取数据功能示例
2018/04/27 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
Angular使用动态加载组件方法实现Dialog的示例
2018/05/11 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
2018/10/20 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
jquery向后台提交数组的代码分析
2020/02/20 jQuery
JS数组的高级使用方法示例小结
2020/03/14 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
浅谈Python的文件类型
2016/05/30 Python
Python 专题四 文件基础知识
2017/03/20 Python
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
Python常用库大全及简要说明
2020/01/17 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
基于Python爬取素材网站音频文件
2020/10/21 Python
别名指示符是什么
2012/10/08 面试题
肯尼迪就职演说稿
2013/12/31 职场文书
婚礼证婚人证婚词
2014/01/13 职场文书
女方回门宴答谢词
2014/01/14 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
首席执行官观后感
2015/06/03 职场文书