Vue父子组件传值的一些坑_vue.js

来源:脚本之家  责任编辑:小易  

先说问题,父组件利用2113props向子组件5261传值,浏览器console有这个值,但是获取不到内4102部的属性,困了我3个小时,1653真的**personalconsole以下为原代码1、home.vue(父组件)--personal是被传的参数<!--子组件--><form-pickerclass="form-picker":personal="personal"></form-picker>exportdefault{data(){return{personal:{state:'',////判断是修改状态,还是新增状态add/editdata:[]}}},mounted(){this.$api.personal.searchPersonalInfo(this.userInfo.userId).then((res)=>{this.personal.data=res.data.data//这里给personal对象赋值接口传来的数据})},}2、formPicker(子组件)--接收personalexportdefault{props:['active','personal'],mounted(){console.log(149,this.personal)console.log(150,this.personal.state)}}运行结果明明149行有state值,150行输出却没有了,是不是超级奇怪后面经过大佬的讲解,其实浏览器console.log也是应该没有的所以,其实我们子组件一开始根本就没有取到这个personal这个对象。3、解决方法--使用watch父组件exportdefault{data(){return{personal:{state:'',////判断是修改状态,还是新增状态add/editdata:[]}}},mounted(){this.$api.personal.searchPersonalInfo(this.userInfo.userId).then((res)=>{//this.personal.data=res.data.data//这里给personal对象赋值接口传来的数据//使用以下方法重新赋值,上面方法watch监听不到,具体什么原因,我也不清楚,知道的告知我!谢谢this.personal={data:res.data.data,state:'edit'}})},}接下来子组件就能watch到personal了子组件watch:{personal(newValue,oldValue){console.log(181,newValue)},/**输出{data:res.data.data,state:'edit'}**/}总结以上所述是小编给大家介绍的解决vue组件props传值对象获取不到的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!您可能感兴趣的文章:vue2.0子组件改变props值,并向父组件传值的方法详解vue父子组件间传值(props)vue之父子组件间通信实例讲解(props、$ref、$emit)vue组件中使用props传递数据的实例详解vue父组件向子组件(props)传递数据的方法vue父组件通过props如何向子组件传递方法详解详解vue2父组件传递props异步数据到子组件的问题www.zgxue.com防采集请勿采集本网。

在用 Vue 的父子组件传值时遇到一个冷门的问题,子组件改变值后父组件的值也随之改变了,特此记录下原因和解决方式。

子组件通过$emit方法向父组件发送数据,子组件在父组件的模板中,通过自定义事件接收到数据,并通过自定义函数操作数据

再系统梳理下 JavaScript 的深拷贝与浅拷贝相关知识点。

props传过来的值是可以一直被接收到的,不知道你代码具体是怎么写的,所以不好回答。建议:一、不要在控制台直接修改值,不如写一个button,点击一下,将

1. 问题描述

可以在created函数里保存下this对象,即新建一个变量存放下this let that = this connect.$on('textareashow', msg => { console.log(that.created

父组件传值给子组件,子组件改变传过来的值后,父组件的值也会跟着改变。

句法上有问题。

这个问题比较冷门,平时如果对组件通信使用得比较简单,一般不会遇到。

您可能感兴趣的文章:vue父组件向子组件动态传值的两种方法浅谈Vue父子组件和非父子组件传值问题Vue中父组件向子组件通信的方法vue2.0父组件给子组件传递数据的方法

2. 原因剖析

核心:双向绑定

父子组件传值的时候涉及双向绑定,当传值为 object 类型时,传值之后数据源会被改变。 深拷贝与浅拷贝

下文详细讲。

3. 解决方案

我目前采用的解决办法是:

传值的时候不要直接传数据源,而是通过拷贝或者定义新变量等方式传值。

简单处理就 JSON.parse(JSON.stringify(obj)),但是这种简单粗暴的方法有其局限性。当值为 undefined、function、symbol 会在转换过程中被忽略。所以,对象值有这三种的话用这种方法会导致属性丢失。

剩下的就是自写深拷贝的工具函数,或者直接借助第三方的库函数,下面展开讲。

4. 深拷贝和浅拷贝

JavaScript中的浅拷贝与深拷贝,只是针对复杂数据类型(Object,Array)的复制问题。浅拷贝与深拷贝都可以实现在已有对象上再生出一份的作用。但是对象的实例是存储在堆内存中然后通过一个引用值去操作对象,由此拷贝的时候就存在两种情况了:拷贝引用和拷贝实例,这也是浅拷贝和深拷贝的区别。

下图为JavaScript复杂数据类型的浅拷贝示意图:

浅拷贝

浅拷贝是拷贝引用,拷贝后的引用都是指向同一个对象的实例,彼此之间的操作会互相影响。

值得注意的是:Object.assgin() 是浅拷贝,它只能深拷贝第一层,深层的还是浅拷贝。因为 Object.assign() 拷贝的是属性值。假如源对象的属性值是一个对象的引用,那么它也只指向那个引用。(摘选自MDN)

MDN讲述 assign 的时候,就有一个典型的例子,这里是文章链接

下面列举第一类浅拷贝 - 拷贝原对象的引用:

/** * 对象的浅拷贝 */var obj1 = { name:'wenyuan', age: 22}var obj2 = obj1;obj2['job'] = 'coder';console.log(obj1); //Object {name: "wenyuan", age: 22, job: "coder"}console.log(obj2); //Object {name: "wenyuan", age: 0, job: "coder"}/* ------------------------- 华丽的分割线 ------------------------- *//** * 数组的浅拷贝 */var arr1 = [1, 2, 3, '4'];var arr2 = arr1;arr2[1] = "test"; console.log(arr1); // [1, "test", 3, "4"]console.log(arr2); // [1, "test", 3, "4"]

接下来看第二类浅拷贝 - 源对象拷贝实例,其属性对象拷贝引用:

这种情况,外层源对象是拷贝实例,如果其属性元素为复杂数据类型(Object、Array)时,内层元素拷贝引用。

对源对象直接操作,不影响另外一个对象,但是对其属性操作时候,会改变另外一个对象的属性的值。

/** * 对象的浅拷贝 * jQuery的 $.extend(a,b) 或 $.extend({},a,b) */var obj1 = { name:'wenyuan', age: 22, social: { blog: 'www.wenyuanblog.com' }, skills: ['js', 'html', 'css', 'python']}var obj2 = $.extend({},obj1);console.log(obj1 === obj2) // 输出false,说明外层数组拷贝的是实例console.log(obj1.social === obj2.social) // 输出true,说明对于Object类型的属性是拷贝引用console.log(obj1.skills === obj2.skills) // 输出true,说明对于Array类型的属性是拷贝引用/** * 对象的浅拷贝 * ES6的 Object.assign() 和 对象扩展运算符... */var obj1 = { name:'wenyuan', age: 22, social: { blog: 'www.wenyuanblog.com' }, skills: ['js', 'html', 'css', 'python']}var obj2 = Object.assign({},obj1);console.log(obj1 === obj2) // 输出false,说明外层数组拷贝的是实例console.log(obj1.social === obj2.social) // 输出true,说明对于Object类型的属性是拷贝引用console.log(obj1.skills === obj2.skills) // 输出true,说明对于Array类型的属性是拷贝引用var obj3 = {...obj1};console.log(obj1 === obj3) // 输出false,说明外层数组拷贝的是实例console.log(obj1.skills === obj3.skills) // 输出true,说明对于Array类型的属性是拷贝引用console.log(obj1.skills === obj3.skills) // 输出true,说明对于Array类型的属性是拷贝引用/* ------------------------- 华丽的分割线 ------------------------- *//** * 数组的浅拷贝 * Array.prototype.slice() */var arr1 = [{name: "wenyuan"}, {name: "Evan You"}];var arr2 = arr1.slice(0);console.log(arr1 === arr2); // 输出false,说明外层数组拷贝的是实例console.log(arr1[0] === arr2[0]); // 输出true,说明其元素拷贝的是引用/** * 数组的浅拷贝 * Array.prototype.concat() */var arr1 = [{name: "wenyuan"}, {name: "Evan You"}];var arr2 = arr1.concat();console.log(arr1 === arr2); // 输出false,说明外层数组拷贝的是实例console.log(arr1[0] === arr2[0]); // 输出true,说明其元素拷贝的是引用/** * 数组的浅拷贝 * ES6的 Object.assign() 和 对象扩展运算符... * 由于数组是特殊的对象,所以ES6中的这种方式也可以用于数组 */var arr1 = [{name: "wenyuan"}, {name: "Evan You"}];var arr2 = Object.assign([],arr1)var arr3 = { ...arr1 };console.log(arr1 === arr2); // 输出false,说明外层数组拷贝的是实例console.log(arr1 === arr3); // 输出false,说明外层数组拷贝的是实例console.log(arr1[0] === arr2[0]); // 输出true,说明其元素拷贝的是引用console.log(arr1[0] === arr3[0]); // 输出true,说明其元素拷贝的是引用 深拷贝

在堆中重新分配内存,并且把源对象所有属性都进行新建拷贝,以保证深拷贝的对象的引用图不包含任何原有对象或对象图上的任何对象,拷贝后的对象与原来的对象是完全隔离,互不影响。

下面列举一些深拷贝的例子:

/** * 对象的深拷贝 * JSON.stringify()和JSON.parse() * 这种深拷贝最简单,但有其局限性,上文已经提到过了 */var obj1 = { name:'wenyuan', age: 22, social: { blog: 'www.wenyuanblog.com' }, skills: ['js', 'html', 'css', 'python']}var obj2 = JSON.parse(JSON.stringify(obj1));console.log(obj1 === obj2) // 输出false,说明外层数组拷贝的是实例console.log(obj1.social === obj2.social) // 输出false,说明对于Object类型的属性也是拷贝实例console.log(obj1.skills === obj2.skills) // 输出false,说明对于Array类型的属性也是拷贝实例/** * 对象的深拷贝 * jQuery的 $.extend(true,a,b) */var obj1 = { name:'wenyuan', age: 22, social: { blog: 'www.wenyuanblog.com' }, skills: ['js', 'html', 'css', 'python']}var obj2 = $.extend(true,obj1);console.log(obj1 === obj2) // 输出false,说明外层数组拷贝的是实例console.log(obj1.social === obj2.social) // 输出false,说明对于Object类型的属性也是拷贝实例console.log(obj1.skills === obj2.skills) // 输出false,说明对于Array类型的属性也是拷贝实例/** * 对象的深拷贝 * 也可以自己写一个函数实现,用递归+判断,注意别进入死循环就好 * 这里不举例了,以前我整理过一篇常用工具类函数的博客,里面包含了深拷贝函数 *//** * 对象的深拷贝 * lodash的_.cloneDeep */var obj1 = { name:'wenyuan', age: 22, social: { blog: 'www.wenyuanblog.com' }, skills: ['js', 'html', 'css', 'python']}var obj2 = _.cloneDeep(obj1);console.log(obj1 === obj2) // 输出false,说明外层数组拷贝的是实例console.log(obj1.social === obj2.social) // 输出false,说明对于Object类型的属性也是拷贝实例console.log(obj1.skills === obj2.skills) // 输出false,说明对于Array类型的属性也是拷贝实例

以上就是JavaScript中的浅拷贝与深拷贝的知识点,以代码的形式记录下来,方便回顾。

到此这篇关于Vue父子组件传值的一些坑的文章就介绍到这了,更多相关Vue父子组件传值内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网! 您可能感兴趣的文章:vue 子组件和父组件传值的示例VUE子组件向父组件传值详解(含传多值及添加额外参数场景)vue 组件间的通信之子组件向父组件传值的方式Vue父组件向子组件传值以及data和props的区别详解vue父组件给子组件的组件传值provide inject的方法vue 父组件给子组件传值子组件给父组件传值的实例代码Vue实现的父组件向子组件传值功能示例vue2.0 子组件改变props值,并向父组件传值的方法vue-prop父组件向子组件进行传值的方法vue 子组件向父组件传值方法图文介绍Vue父组件向子组件传值vue父组件向子组件动态传值的两种方法

App.vue为父2113,引入componetA组件之后,则可以在App.vue中使用标5261签(注意驼峰写法要改成componet-a写法,因为4102html对大小写不敏感1653,componenta与componentA对于它来说是一样的,不好区分,所以使用小写-小写这种写法)内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • vue axios数据请求及vue中使用axios的方法
  • vue.js声明式渲染和条件与循环基础知识
  • vue+element使用动态加载路由方式实现三级菜单页面显示的操作
  • element input输入框的使用方法
  • vue作用域插槽slot-scope实例代码
  • vue页面骨架屏的实现方法
  • 详解vue2路由vue-router配置(懒加载)
  • vue 1.0 结合animate.css定义动画效果
  • vue实现简单的拖拽效果
  • vue使用vuex实现首页导航切换不同路由的方法
  • vue 组件递归 父子组件传值问题,求教
  • 解决vue组件props传值对象获取不到的问题
  • Vue中子组件给父组件传值,父组件接收不到
  • vue.js 两个父组件中的子组件怎么传值
  • vue.js父组件怎么传值给子组件
  • Vue组件传值问题
  • vue 组件传值,传过来的值不能被渲染,怎么办?
  • vue中route-view 中父子组件传参,在最新的一次更...
  • vue 子组件向父组件传值方法
  • vue 动态组件子组件之间怎么传值
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.js其它首页javascriptjavascript类库vue 子组件和父组件传值的示例vue子组件向父组件传值详解(含传多值及添加额外参数场景)vue 组件间的通信之子组件向父组件传值的方式vue父组件向子组件传值以及data和props的区别详解vue父组件给子组件的组件传值provide inject的方法vue 父组件给子组件传值子组件给父组件传值的实例代码vue实现的父组件向子组件传值功能示例vue2.0 子组件改变props值,并向父组件传值的方法vue-prop父组件向子组件进行传值的方法vue 子组件向父组件传值方法图文介绍vue父组件向子组件传值vue父组件向子组件动态传值的两种方法vue axios数据请求及vue中使用axios的方法vue.js声明式渲染和条件与循环基础知识vue+element使用动态加载路由方式实现三级菜单页面显示的操作element input输入框的使用方法vue作用域插槽slot-scope实例代码vue页面骨架屏的实现方法详解vue2路由vue-router配置(懒加载)vue 1.0 结合animate.css定义动画效果vue实现简单的拖拽效果vue使用vuex实现首页导航切换不同路由的方法vue引用js文件的多种方式(推荐)vue之父子组件间通信实例讲解(prvue props用法详解(小结)简单理解vue中props属性vue元素的隐藏和显示(v-show指令vue.js常用指令汇总(v-if、v-fovue 进阶教程之v-model详解详解vue 路由跳转四种方式 (带参使用vue实现图片上传的三种方式vue实现文件上传功能解决vue脚手架项目打包后路由视图不显示的如何配置vue.config.js 处理static文件夹基于vue2.0的分页组件vuedraggable+element ui实现页面控件拖拽vue.js中vue-router 2.0基础实践教程详解vue.js v-for不支持ie9的解决方法vue 实现手动刷新组件的方法解决vue2.0动态绑定图片src属性值初始化时利用vue组件自定义v-model实现一个tab组件vue组件发布到npm简单步骤
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved