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

最新推荐文章于 2023-11-08 17:05:19 发布
最新推荐文章于 2023-11-08 17:05:19 发布
阅读量2.3k 收藏 2
点赞数 4
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hao_tiamo/article/details/103027744
版权

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

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

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

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

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

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

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

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

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

最低0.47元/天 解锁文章
hao_tiamo
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue学习笔记（4） --传值与传引用
eswang的CSDN博客
08-01 930
组件，传值，传引用（父=>子），传事件(子=>父)
vue相关知识点——浅浅笔记
06-22
这样，对数据的操作不再需要引用相应的 DOM 对象，可以说数据和 View 是分离的，他们通过 Vue 对象这个 vm 实现相互的绑定。 二、了解 Vue 1. Vue 自动感知页面元素与数据对象（json 数据一般）的绑定。 Vue 框架...
vue 中使用引用类型的注意事项
lulula的博客
10-16 2401
前言 js 中对象Object、数组Array都是引用类型。 引用类型var a={name:'tom'}; var b=a; a={}; console.log(b.name) //tom 当用变量声明一个引用类型时，实际上这个变量不是引用类型本身，而是一个指向这个引用类型的指针。 Vue 不能检测以下变动的数组： 当你利用索引直接设置一个项时，例如：vm.items[indexOfI...
vue学习 22传值和传引用
Shelly Long的博客
04-29 397
属性传值可以传两种东西 1.传具体的值 2.传一个引用 如果是传引用，基本上就两个，一个是我们的数组，一个是对象 传引用的话，如果有不止一个地方应用到。改变其中一个，别的地方也会被改变。无论是否在一个组件当中 传值的话，只会改变当前组件中应用到的地方 Users.vue <template> <div class="users"> <ul&...
vue学习基础（5）组件属性传值/传值和传引用、注册事件
Study_Live_Sun的博客
02-05 394
一、组件属性传值 从父组件把值传递给子组件 1、父组件绑定内容。传递父组件data中的参数值 2、子组件获得属性值 子组件接收值的其他写法 二、传值和传引用 属性传值，值有两种情况：1、传值 2、传引用（对象、数组） Users.vue里面操作对象的删除，template里面增加一个删除按钮，调用删除方法。 App.vue里面使用两次该组件 效果图如下，点...
vue中传值和传引用_v传值和传引用
weixin_29800917的博客
12-23 251
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系列文章（16）传值和传引用的类型和区别
D.K专栏
07-06 1086
父组件在向子组件进行传输内容的时候，如果传输的类型是array object，那么传递的是一个引用。如果父组件向子组件传递的是一个String,Number,boolean则传递的是一个值。下面对这两种情况进行代码演示。 在子组件里增加一个按钮修改传递的值的情况，观察两个组件的内容是否变化。 app.vue <template> <div id="app"> ...
Vuejs 组件——props数据传递的实例代码
12-29
props数据传递 ①组件实例的作用域： 是孤立的，简单的来说，组件和组件之间，即使有同名属性，值也不共享。 <add></add> <del></del> [removed] var vm = new Vue({ el: '#app', components: { add: { ...
简单了解vue中父子组件如何相互传递值（基础向）
12-12
父组件：vue的根实例——用new Vue()构造函数创建的vue实例（实例会有一个挂载点，挂载点里的所有内容可理解为父组件的内容） 　 这里以root为挂载点，root里包含的所有内容可称为模板，即我们常说的父组件 　 子...
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
10-15
在Vue.js中，数据流动通常遵循单向数据流原则，即数据从父组件流向子组件，但不直接从子组件反向修改。然而，有时子组件确实需要改变来自父组件的某些属性，这时可以通过`v-bind`的修饰符`sync`来实现数据的双向绑定...
vue中传值和传引用_vue prop属性传值与传引用示例
weixin_32716541的博客
02-11 394
vue组件在prop里根据type决定传值还是传引用。简要如下：传值：String、Number、Boolean传引用：Array、Object若想将数组或对象类型也以值形式传递怎么办呢？如下方式可以实现：// component-A 引用component-B组件:personBak="person_Bak">// component-A 部分关键代码// 将数组复制，personBak与...
最佳实践：vue组件引用传值
李刚的学习专栏
05-18 1473
下述组件传值指引用类型（数组或对象）传值。 准备：单向数据流 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。 额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。 这个 prop 用来传递一个初始值；这个子组件接下
VueCil-传值和传引用
qq_42991834的博客
05-15 375
传值：string number boolean 传引用：array object 注意：传引用就类似与C的传值和传址 比如传递个array 然后删除一个元素其他地方调用array的也会被删除 例子： app.vue <template> <div id="app"> <app-header v-bind:title="title"></ap...
vue：引用传递参数值，更改其中一个变量值,另一个变量值同步改变
02-19 2083
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 687
需要大家深刻理解vue单向数据流思想，不要为了节省代码（或偷懒），产生难以维护的代码！当父子组件对引用类型需要同步修改时，在子组件中需要切断相关引用，避免引用传值传递破坏vue的副作用，违背了vue单向数据流的设计初衷。...
VUE文件引入另一个VUE文件，并传递参数
最新发布
qzz12345的博客
11-08 990
记录、备忘。
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 3957
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
vue避免引用赋值
assassin_0302的博客
09-06 766
引用赋值：一个值，多个地方使用，改变一个，其他都改变，因为都是引用同一个地址的数据 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 6496
传值：string number boolean传引用：object（对象）    array（数组）引用：一旦你某个地方发生删除或者添加，整个都会进行改变！（不要忘记基础知识）1.传值，现在我们想要，App.vue里面的一个数值传到Header.vue文件里面首先我们先给App.vue里面一个String值data(){ return{ sendmessage:"传值用法，string...
Vue 爬坑之路（二）—— 组件之间的数据传递
05-26
好的，来谈谈 Vue 组件之间的数据传递。 1. 父组件向子组件传递数据 父组件可以通过 props 将数据传递给子组件，子组件通过 props 接收数据。 父组件： ``` <template> <div> <child-component :message="msg"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent' export default { components: { ChildComponent }, data () { return { msg: 'hello' } } } </script> ``` 子组件： ``` <template> <div>{{ message }}</div> </template> <script> export default { props: ['message'] } </script> ``` 2. 子组件向父组件传递数据 子组件可以通过 $emit 触发事件并传递数据，父组件通过 v-on 监听事件并接收数据。 子组件： ``` <template> <div> <button @click="sendMessage">发送消息</button> </div> </template> <script> export default { methods: { sendMessage () { this.$emit('send-message', 'hello') } } } </script> ``` 父组件： ``` <template> <div> <child-component @send-message="getMessage"></child-component> <div>{{ receivedMessage }}</div> </div> </template> <script> import ChildComponent from './ChildComponent' export default { components: { ChildComponent }, data () { return { receivedMessage: '' } }, methods: { getMessage (message) { this.receivedMessage = message } } } </script> ``` 以上就是 Vue 组件之间的数据传递方式，希望能对你有帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值