vue prop属性传值与传引用示例

 更新时间:2019年11月13日 15:28:57   作者:幻欢子  
今天小编就为大家分享一篇vue prop属性传值与传引用示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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属性传值与传引用示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 解决Vue3 echarts v-show无法重新渲染的问题

    解决Vue3 echarts v-show无法重新渲染的问题

    这篇文章主要介绍了Vue3 echarts v-show无法重新渲染的问题,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • Vue生命周期与setup深入详解

    Vue生命周期与setup深入详解

    Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期
    2022-09-09
  • Vue3通过hooks方式封装节流和防抖的代码详解

    Vue3通过hooks方式封装节流和防抖的代码详解

    vue3 中的 hooks 就是函数的一种写法,就是将文件的一些单独功能的js代码进行抽离出来,放到单独的js文件中,或者说是一些可以复用的公共方法/功能,本文给大家介绍了Vue3通过hooks方式封装节流和防抖,需要的朋友可以参考下
    2024-10-10
  • 使用Vue3实现在浏览器端进行zip文件压缩

    使用Vue3实现在浏览器端进行zip文件压缩

    在前端开发中,我们时常需要处理文件上传和下载的功能,本文主要和大家分享一下如何使用Vue3和JSZip库在浏览器端实现zip文件压缩,需要的可以参考下
    2024-05-05
  • Vue2 响应式系统之数组

    Vue2 响应式系统之数组

    这篇文章主要介绍了Vue2 响应式系统之数组,本文接着上几篇文章Vue2响应式系统 、Vue2 响应式系统之分支切换,响应式系统之嵌套、响应式系统之深度响应 展开相关内容,需要的朋友可以参考一下
    2022-04-04
  • 玩转vue的slot内容分发

    玩转vue的slot内容分发

    这篇文章主要介绍了玩转vue的slot内容分发,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue微信分享的实现(在当前页面分享其他页面)

    vue微信分享的实现(在当前页面分享其他页面)

    这篇文章主要介绍了vue微信分享,在当前页面分享其他页面,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • 浅析Vue3中通过v-model实现父子组件的双向数据绑定及利用computed简化父子组件双向绑定

    浅析Vue3中通过v-model实现父子组件的双向数据绑定及利用computed简化父子组件双向绑定

    这篇文章主要介绍了浅析Vue3中通过v-model实现父子组件的双向数据绑定及利用computed简化父子组件双向绑定,需要的朋友可以参考下
    2022-12-12
  • 从零实现一个vue文件解析器

    从零实现一个vue文件解析器

    本文就讨论下怎么实现一个处理.vue文件的loader,以及用loader处理完.vue文件怎么把内容渲染在浏览器上并实现简单的响应式,对vue文件解析器相关知识感兴趣的朋友一起看看吧
    2022-06-06
  • Vue2.0 ES6语法降级ES5的操作

    Vue2.0 ES6语法降级ES5的操作

    这篇文章主要介绍了Vue2.0 ES6语法降级ES5的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10

最新评论