今天在写分页功能时，发现父子组件传值时，子组件监听不到父组件中数据的变化，传递的是一个引用类型的数据

其原因是引用类型共用一个内存地址，父子组件用的是同一个对象，故子组件监听不到变化，此时就需要做一个深拷贝，相关代码如下：

其实param是一个引用类型

将父组件中要传递的值做一个深拷贝，其中self.pageDatasCopy是self.pageDatas的深拷贝，self.pageDatas是父组件中的变量，

子组件监听变化：（watch监听）

vue组件父子组件传递引用类型数据的更多相关文章

  1. Vue 非父子组件通信方案

    Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...

  2. 【Vue课堂】Vue.js 父子组件之间通信的十种方式

    这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...

  3. Vue中父子组件执行的先后顺序

    Vera   Vue中父子组件执行的先后顺序探讨(转载) 前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看 ...

  4. Vue中父子组件执行的先后顺序探讨

    前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...

  5. vue组件-构成组件-父子组件相互传递数据

    组件对于vue来说非常重要,学习学习了基础vue后,再回过头来把组件弄透! 一.概念 组件意味着协同工作,通常父子组件会是这样的关系:组件 A 在它的模版中使用了组件 B . 它们之间必然需要相互通信 ...

  6. 关于vue.js父子组件数据传递

    vue.js中使用props down,events up的原则进行父子组件间的通信,先来记录下props down,看个例子: <div id="app2"> < ...

  7. Vue.js 父子组件相互传递数据

    父传子 : 子组件接收变量名=父组件传递的数据 如::f-cmsg="fmsg"  注意驼峰问题 子传父:@子组件关联的方法名 = 父组件接受的方法名 如:@func=" ...

  8. uni-app中vue组件父子值传递

    一.父组件向子组件传递数据(props) <template> <view class="container" style="background: # ...

  9. 简述vue中父子组件是怎样相互传递值的（基础向）

    前言 首先,你需要知道vue中父组件和子组件分别指的是什么?   父组件:vue的根实例——用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) ...

随机推荐

  1. 我的Android进阶之旅------>解决Bug:打开eclipse报错,发现了以元素 'd:skin' 开头的无效内容。此处不应含有子元素。

    今天来打开Eclipse 报错了,错误信息如下: [2015-08-01 09:07:43 - Android SDK] Error when loading the SDK: Error: Erro ...

  2. ubuntu常见错误--Could not get lock /var/lib/dpkg/lock解决(转）

    通过终端安装程序sudo apt-get install xxx时出错: E: Could not get lock /var/lib/dpkg/lock - open (11: Resource t ...

  3. 4.4 使用STM32控制MC20进行GPS帧数据解析

    需要准备的硬件 MC20开发板 1个 https://item.taobao.com/item.htm?id=562661881042 GSM/GPRS天线 1根 https://item.taoba ...

  4. iOS UIWebView键盘处理

    让UIWebView弹出键盘上的按钮显示中文    http://www.cr173.com/html/19440_1.html 如果你有下面的问题,此文也许会帮到你. 键盘遮盖了UIWebView. ...

  5. 剑指offer 面试37题

    面试37题: 题:序列化二叉树 题目:请实现两个函数,分别用来序列化和反序列化二叉树 解题思路:首先来看二叉树的序列化,二叉树的序列化就是采用前序遍历二叉树输出节点,再碰到左子节点或者右子节点为Non ...

  6. Linux系统资源查询命令（cpu、io、mem）

    cpu/mem: 1. 指定pid top -p pid1,pid2,... 2. top排序 先top,然后  输入大写P,则结果按CPU占用降序排序.输入大写M,结果按内存占用降序排序. io: ...

  7. 修改subline text3左侧样式

    安装PackageResourceViewer 快捷键 ⌘(command)+⇧(shift)+P 打开 Command Palette 输入 Package Control:Install 回车,等 ...

  8. 一个不成熟的编程员，写写 js 的面向对象

    其实感觉本人 js 并未入门,甚至说也是个不合格的编程员,什么面向对象都不会,一直都往 Object 里面填方法,假装很对象的样子. 但学习嘛,这道坎还是得多试几下的,说不定就跨过去了呢. 个人喜欢用 ...

  9. level-4

    [1.网页乱码的问题是如何产生的.怎么样解决?] 造成html网页乱码原因主要是html源代码内中文字内容与html编码不同造成.主要情况有以下三种: 1.比如网页源代码是gbk的编码,而内容中的中文 ...

  10. 前端之HTML基础

    一.初识HTML 1.web服务的本质 方式一:服务端 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SO ...