记vue踩过的坑————按值传递与按引用传递

最新推荐文章于 2023-11-08 17:05:19 发布
最新推荐文章于 2023-11-08 17:05:19 发布
阅读量2.5k 收藏 2
点赞数 4
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hao_tiamo/article/details/103027744
初学者在Vue中遇到按值与按引用传递数据的问题，通过实例解释了基本类型和引用类型的区别，强调了数组修改时因引用导致的意外影响。为解决此问题，提出了利用JSON.stringify和JSON.parse进行深拷贝的方法，同时推荐了两篇关于深拷贝和浅拷贝的博客文章。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

初学vue，因为前期使用组件传值，传递成功并成功获取到值，便自认为都可以直接传值，导致踩了两天的坑  现在记载下来在防止一下

      正常思想是，我想去向data里面放值，这个值是一个临时的，只使用一次的，用来进行传值到其他组件，传值完成后在进行一步删除，就会实现只传一次值，下一次再传值是一个全新的值的效果。

   但是vue的传值过程不只是赋值的过程，他有着一个传值与传引用的区别。

  在数据中有基本类型与引用数据类型

  基本数据类型有number,string,boolean,null,undefined五类。

  引用数据类型(Object类)有常规名值对的无序对象{a:1}，数组[1,2,3]，以及函数等

基本类型--名值存储在栈内存中，例如let a=1

当你b=a复制时，栈内存会新开辟一个内存，例如这样

引用数据类型--名存在栈内存中，值存在于堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值

当b=a进行拷贝时，其实复制的是a的引用地址，而并

最低0.47元/天 解锁文章

200万优质内容无限畅学
如何使用vue定义组件之——子组件向父组件传递数据
qq_58341172的博客
03-13 690
div>我是父组件访问子组件的数据:-- 监听子组件触发的数据 -->'my-children': { //子组件，只能在 my-father中调该组件data() {return {",",age: 6,user: {id: 1001,},//触发事件，向父组件传递数据new Vue({'my-father': {//父组件data() {return {msg: "",name: "",
如何使用vue定义组件之——父组件向子组件传递数据
最新发布
qq_58341172的博客
03-13 494
首先，准备父子容器： 准备Vue实例： 现在，我们需要向子组件索取数据：技术：属性绑定+数据拦截 在子组件对象中，使用选项声明获取的数据，进行绑定属性的拦截，即接收来自父组件的数据 现在，可以在界面调用父组件的数据： 打印结果：
vue学习 22传值和传引用
Shelly Long的博客
04-29 448
属性传值可以传两种东西 1.传具体的值 2.传一个引用 如果是传引用，基本上就两个，一个是我们的数组，一个是对象 传引用的话，如果有不止一个地方应用到。改变其中一个，别的地方也会被改变。无论是否在一个组件当中 传值的话，只会改变当前组件中应用到的地方 Users.vue <template> <div class="users"> <ul&...
vue学习基础（5）组件属性传值/传值和传引用、注册事件
Study_Live_Sun的博客
02-05 495
一、组件属性传值 从父组件把值传递给子组件 1、父组件绑定内容。传递父组件data中的参数值 2、子组件获得属性值 子组件接收值的其他写法 二、传值和传引用 属性传值，值有两种情况：1、传值 2、传引用（对象、数组） Users.vue里面操作对象的删除，template里面增加一个删除按钮，调用删除方法。 App.vue里面使用两次该组件 效果图如下，点...
vue中传值和传引用_v传值和传引用
weixin_29800917的博客
12-23 310
app.vueimport Header from './components/Header.vue'import Body from './components/Body.vue'export default {name:'app',data(){return{users:[{name:"小王",职位:"java web开发",show:false},{name:"小王",职位:"java we...
VUE组件传值与引用
Bidding
08-01 4362
1、父组件引入子组件： 父组件引入子组件，三步走： 第一步：引入子组件 import StateWatchListPage from '子组件的路径'; 第二步：将子组件名称加入到components对象 components:{ StateWatchListPage } 第三步：使用子组件 <state-...
vue系列文章（16）传值和传引用的类型和区别
D.K专栏
07-06 1178
父组件在向子组件进行传输内容的时候，如果传输的类型是array object，那么传递的是一个引用。如果父组件向子组件传递的是一个String,Number,boolean则传递的是一个值。下面对这两种情况进行代码演示。 在子组件里增加一个按钮修改传递的值的情况，观察两个组件的内容是否变化。 app.vue <template> <div id="app"> ...
vue相关知识点——浅浅笔记
06-22
这样，对数据的操作不再需要引用相应的 DOM 对象，可以说数据和 View 是分离的，他们通过 Vue 对象这个 vm 实现相互的绑定。 二、了解 Vue 1. Vue 自动感知页面元素与数据对象（json 数据一般）的绑定。 Vue 框架...
如何解决@RequestParam无法接收vue+axios传递json数据（csdn）————程序.pdf
12-05
本文主要探讨了在使用Vue+Axios与SpringBoot进行开发时，如何解决@RequestParam无法接收JSON数据的问题。 1. 问题概述 在SpringBoot的Controller中，通常使用@RequestParam注解来接收HTTP请求中的查询参数或表单...
vue中传值和传引用_vue prop属性传值与传引用示例
weixin_32716541的博客
02-11 430
vue组件在prop里根据type决定传值还是传引用。简要如下：传值：String、Number、Boolean传引用：Array、Object若想将数组或对象类型也以值形式传递怎么办呢？如下方式可以实现：// component-A 引用component-B组件:personBak="person_Bak">// component-A 部分关键代码// 将数组复制，personBak与...
最佳实践：vue组件引用传值
李刚的学习专栏
05-18 1672
下述组件传值指引用类型（数组或对象）传值。 准备：单向数据流 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。 额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。 这个 prop 用来传递一个初始值；这个子组件接下
VueCil-传值和传引用
qq_42991834的博客
05-15 419
传值：string number boolean 传引用：array object 注意：传引用就类似与C的传值和传址 比如传递个array 然后删除一个元素其他地方调用array的也会被删除 例子： app.vue <template> <div id="app"> <app-header v-bind:title="title"></ap...
vue：引用传递参数值，更改其中一个变量值,另一个变量值同步改变
欢迎来到我的优快云技术博客！这里是一个专注于编程技术深度交流与分享的乐园。作为一名热衷于探索和实践的技术爱好者，我致力于将自己在前端开发、后端架构、移动端应用（包括微信小程序、抖音小程序、UNI-APP开发）、以及APP开发领域的宝贵经验与心得，无私地分
02-19 2260
vue 引用传递而不是值传递，两个变量指向的是同一个内存地址。 let data = ['测试1','测试2']; this.typeList = data; data.unshift('全部'); console.log(this.typeList); //typeList 值为 ['全部','测试1','测试2'] 可以使用以下2种办法避免该问题 解决办法1： let data = res.data; this.typeList = data.map((o)=>{return o;
最佳实践：vue组件引用传值（续篇）
李刚的学习专栏
07-15 756
需要大家深刻理解vue单向数据流思想，不要为了节省代码（或偷懒），产生难以维护的代码！当父子组件对引用类型需要同步修改时，在子组件中需要切断相关引用，避免引用传值传递破坏vue的副作用，违背了vue单向数据流的设计初衷。...
VUE文件引入另一个VUE文件，并传递参数
qzz12345的博客
11-08 1519
记录、备忘。
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 4334
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
vue避免引用赋值
assassin_0302的博客
09-06 823
引用赋值：一个值，多个地方使用，改变一个，其他都改变，因为都是引用同一个地址的数据 import Vue from 'vue' new vue({ el:"#app", data:{ a:1, b:2 } }) 如何避免： 使用函数返回 data:function(){ return { a:1, b:2 } } ...
vue.js入门（21）传值和传引用
yiyiyixin的博客
05-20 6560
传值：string number boolean传引用：object（对象）    array（数组）引用：一旦你某个地方发生删除或者添加，整个都会进行改变！（不要忘记基础知识）1.传值，现在我们想要，App.vue里面的一个数值传到Header.vue文件里面首先我们先给App.vue里面一个String值data(){ return{ sendmessage:"传值用法，string...
Vue学习笔记（4） --传值与传引用
eswang的优快云博客
08-01 993
组件，传值，传引用（父=>子），传事件(子=>父)
Vue 爬坑之路（二）—— 组件之间的数据传递
05-26
好的，来谈谈 Vue 组件之间的数据传递。 1. 父组件向子组件传递数据 父组件可以通过 props 将数据传递给子组件，子组件通过 props 接收数据。 父组件： ``` <child-component :message="msg"></child-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值