详解vue.js之props传递参数

本篇文章通过demo实例给大家详细分析了props传递参数的用法以及遇到问题后的解决办法,以下是全部内容。

前段时间用vue做一个后台管理系统,其中每一页都需要一个表格来展示信息。自然就想到了将表格提取出来做成公共组件,将不同页面的数据传入进行渲染,达到复用的目的。

demo地址

1. 问题发现

在父组件中,需要向表格组件传递的数据有表格的内容数据tableData,表格的页面数据page。

<div>
 <my-table :table-data="tableData" :page-info="pageInfo" id="myTable"></my-table>
</div>

其中tableData是个Array对象,是所有需要在表格中展示的数据对象组成的一个数组。而pageInfo是个Object对象,包含了表格页面信息。在父组件对两个数据对如下初始化,形式如下

tableData:[],
pageInfo: {
 current: 1, // 当前是第几页
 total: 100, // 数据对象的总数
 size: 20 // 每页显示的数量
}

按照官方文档上的说明,prop是单向绑定的,不应该在子组件内部改变prop。之所以有想修改prop中数据的冲动,主要是prop作为初始值传入后,子组件想把它当作局部数据来用。对于这种情况,官方的说法是定义一个局部变量,并用 prop 的值初始化它:

props: ['tableData', 'pageInfo'],
data() {
 return {
  tData: this.tableData,
  page: this.pageInfo
 }
}

然后根据官方文档的说法,当每次父组件更新时,子组件的所有prop都会更新为最新值。而tableData和pageInfo的信息是异步通过api从server端获取的:

{
 error: 0,
 msg: "调用成功.",
 data: {
  restrictioninfo: [...],
  total: 42
 }
}

因此当获取到数据时父组件需要改变传入子组件中的值:

me.tableData = Json.data.restrictioninfo;
me.pageInfo.total = Json.data.total;

按理说这时候子组件中的值应该更新成server返回的值,但是子组件页面的总数更新了,但table数据依然是初始化时的空数组。(黑人问号???)


2.赋值与绑定

首先需要定位数据是在哪个地方出了问题,于是我做了一个demo来定位问题。

首先看父组件与子组件中各元素的初始值:

然后当只改变父组件中数组的引用时可以看到子组件的props数组随之改变,而子组件中绑定的数组确并没有随之改变

因此,可以发现,问题是出在了这一步

props: ['tableData', 'pageInfo'],
data() {
 return {
  tData: this.tableData,
  page: this.pageInfo
 }
}

而要弄清楚问题的根源,就得弄清楚vue文档中深入响应式原理。

"在Vue实例的data选项中,Vue将遍历此对象所有的属性,并使用Object.defineProperty把这些属性全部转为 getter/setter","每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新。"文档中说了这么一大堆,简单理解就是Vue将data选项中的vm.$data.a与DOM中的vm.a进行了双向绑定,即其中一个变化,另一个也会跟着变化。在Vue源码中是由defineReactive$$1函数实现的:

但在子其中主要是利用了Object.defineProperty的get和set方法实现了双向绑定。而在子组件中,pros数据和子组件的$data是通过如下方式联系在一起的:

tData: this.tableData

查询Vue源码可知this.tableData与tData之间仅仅是赋值,即"="关系

而上述的initData函数是在组件构建时候执行的,因此只会在create时执行一次。这也是为什么官方文档中"作为初始值传入"这一说法,因为他本就只会执行一次。当组件构建完成后,this.tableData与tData就没有半毛钱关系了,其中一个的变化并不会引起另一个变化。当然,这种说法并不准确,因为在上文中,我们动态改变父组件传入的total,子组件也"随之"改变,感觉就像是绑定在一起了啊,这又是怎么回事呢?

3.引用类型带来的假象

当然,我们还是要从官方文档出发来解决这个问题。文档中有这样一个提示:

这里就需要理解引用类型的概念,引用数据类型值指保存在堆内存中的对象。也就是,变量中保存的实际上的只是一个指针,这个指针指向内存中的另一个位置,该位置保存着对象。访问方式是按引用访问。例如一个js对象a,他在内存中的存储形式如下图所示:

var a = new Object();

当操作时,需要先从栈中读取内存地址,然后再延指针找到保存在堆内存中的值再操作。

a.name = 'xz';


引用类型变量赋值,本质上赋值的是存储在栈中的指针,将指针复制到栈中未新变量分配的空间中,而这个指针副本和原指针指向存储在堆中的同一个对象;赋值操作结束后,两个变量实际上将引用同一个对象。因此,在使用时,改变其中的一个变量的值,将影响另一个变量。

var b = a;


在了解了引用类型之后,我们在来看看上文提到的动态改变传入子组件前后内存中的情况:

me.tableData = Json.data.restrictioninfo;
me.pageInfo.total = Json.data.total;
========================================
props: ['tableData', 'pageInfo'],
data() {
 return {
  tData: this.tableData,
  page: this.pageInfo
 }
}

首先对tableData的改变是改变了其引用的指针,而对pageInfo则改变了其中一个属性的值,因此动态改变前:

动态改变后:

这样就解释了为什么子组件页面的总数更新了,但table数据依然是初始化时的空数组。因为引用类型的存在,我们动态改变父组件传入的total,子组件也"随之"改变了。

(0)

相关推荐

  • 解决eclipse中没有js代码提示的问题

    自学js,发现eclipse中不管js文件.html文件.jsp文件没有都没js代码的提示,对于js代码也不报错,有时候就因为单词敲错却查了很久没查出来,很烦很难受. 在网上找了很多方法,都没有解决,特别是有个在javascript中editor中content assit里改一个地方为zjs的方法,试了几次也没成功,不知道各位老铁有没有成功? 再后来,我下了个插件,问题就解决了. 打开eclipse点击window旁边的Help选项---> Eclipse Marketplace---> 在

  • Eclipse中实现JS代码提示功能(图文教程)

    用Eclipse写JS代码时没有提示,很烦,心累: 找个各种方法以及插件,试了一下,个人感觉AngularJS Eclipse 插件很强,好用,不多说,先装上: 然后重启Eclipse ,右键你的项目 convert to Tern Project 也行 根据自己的需要变动,直接OK,接下来就是见证奇迹的时刻: 如果要变动就右键项目 总结 以上所述是小编给大家介绍的Eclipse中实现JS代码提示功能(图文教程),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常

  • JS实现在线ps功能详解

    前言 本系统是基于fabric.js实现的canvas版图片,文本编辑器,支持对图片的放大,缩小,旋转,镜面翻转,拖动,显示/隐藏图层,删除图层,替换图层等操作,对文本支持修改文本内容,颜色,字体,加粗,斜体,下划线,背景色等,同时支持图片已有的操作,拖动图层有辅助线功能,可对画布做放大缩小功能,多操作可撤销/回退功能,可直接导出图片,ps基本操作都已支持,欢迎star. 项目地址https://github.com/Jeff-Bee/onLinePS fabric.js相关 fabric 文档

  • Python Json模块中dumps、loads、dump、load函数介绍

    Json模块dumps.loads.dump.load函数介绍 1.json.dumps() json.dumps()用于将dict类型的数据转成str,因为如果直接将dict类型的数据写入json文件中会发生报错,因此在将数据写入时需要用到该函数. import json name_emb = {'a':'1111','b':'2222','c':'3333','d':'4444'} jsObj = json.dumps(name_emb) print(name_emb) print(jsOb

  • Vuejs第九篇之组件作用域及props数据传递实例详解

    本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#Props 本教程是小编结合官方文档整理的一套更加细致,代码更多更全的教程,特别适合新手阅读. props数据传递 ①组件实例的作用域: 是孤立的,简单的来说,组件和组件之间,即使有同名属性,值也不共享. <div id="app"> <add></add> <del></del> </div> <sc

  • nodejs中request库使用HTTPS代理的方法

    正在尝试改用NodeJS编写爬虫,http请求库选择了 request,用起来还是挺简单的. 现在有个需求,需要用Fiddler抓包我发出去的请求,以便和浏览器发出去的包进行对比. 因为需要解密HTTPS报文,需要让node要么忽略证书安全,要么信任Fiddler的CA证书. 网上找了一圈,总结如下: 方法一:设置环境变量 设置环境变量NODE_TLS_REJECT_UNAUTHORIZED=0 即"不拒绝未认证的证书" 但是直接修改系统环境变量比较危险,因为会影响到所有nodejs的

  • 详解vue.js之props传递参数

    本篇文章通过demo实例给大家详细分析了props传递参数的用法以及遇到问题后的解决办法,以下是全部内容. 前段时间用vue做一个后台管理系统,其中每一页都需要一个表格来展示信息.自然就想到了将表格提取出来做成公共组件,将不同页面的数据传入进行渲染,达到复用的目的. demo地址 1. 问题发现 在父组件中,需要向表格组件传递的数据有表格的内容数据tableData,表格的页面数据page. <div> <my-table :table-data="tableData"

  • 详解vue嵌套路由-query传递参数

    在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 params index.html <div id="app"> <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> main.js 同样通过重定向来显示父路由 import Vue from 'vue' import VueRo

  • 详解vue嵌套路由-params传递参数

    在嵌套路由中,父路由向子路由传值除了query外,还有params,params传值有两种情况,一种是值在url中显示,另外一种是值不显示在url中. 1.显示在url中 index.html <div id="app"> <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> main.js params传值是通过 :[参数值]

  • 详解 vue.js用法和特性

    前  言 最近用Vue.js做了一个数据查询平台,还做了一个拼图游戏,突然深深的感到了vue的强大. Vue.js是一套构建用户界面(user interface)的渐进式框架.与其他重量级框架不同的是,Vue 从根本上采用最小成本.渐进增量(incrementally adoptable)的设计.Vue 的核心库只专注于视图层,并且很容易与其他第三方库或现有项目集成.另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供有力驱动. Vue.j

  • 详解Vue.js中.native修饰符

    修饰符(Modifiers)是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定.这篇文章给大家介绍Vue.js中.native修饰符,感兴趣的朋友一起看看吧. .native修饰符 官方对.native修饰符的解释为: 有时候,你可能想在某个组件的根元素上监听一个原生事件.可以使用 v-on 的修饰符 .native .例如: <my-component v-on:click.native="doTheThing"></my-component>

  • 详解Vue.js 响应接口

    Vue 可以添加数据动态响应接口. 例如以下实例,我们通过使用 $watch 属性来实现数据的监听,$watch 必须添加在 Vue 实例之外才能实现正确的响应. 实例中通过点击按钮计数器会加 1.setTimeout 设置 10 秒后计算器的值加上 20 . <div id = "app"> <p style = "font-size:25px;">计数器: {{ counter }}</p> <button @click

  • 详解Vue.js 可拖放文本框组件的使用

    可拖放文本框允许用户通过拖动备选项至文本框来确定输入,其实也可以说是 combobox 的一种变形. 与 combobox 相比,这种组件能让用户更加直观的看到所有备选项,并且可以是多个输入共用一组备选项. 类似的组件也曾用在 3D Windrose App,Graph Maker App 等多个 app 里. 注册组件 注册可拖放文本框组件(其实就是将封装好的这部分代码 Ctrl+C and Ctrl+V). <script type="text/x-template" id=

  • 详解vue.js数据传递以及数据分发slot

    一.组件间的数据传递 1.父组件获取子组件的数据 *子组件把自己的数据,发送到父级 *vm.$emit(事件名,数据); *v-on: @ 示例用法:当点击send按钮的时候,"111"变成"我是子组件的数据" <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父级获取子级的数据

  • 详解vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然成为了第一个问题.鉴于目前web前端mvvm框架以及组件化开发方式的流行,决定技术栈采用:vue + es6 + 组件化. 这里首先简单说下web前端组件化开发方式的历程: 最早的组件化结构,代码结构可能如下: - lib/components/calendar |- calendar.css |-

  • 详解Vue.js——60分钟组件快速入门(上篇)

    组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢? 组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素. 由于组件的篇幅较大,我将会把组件的入门知识分为两篇来讲解,这样也便于各位看官们快速消化. 组件的创建和注册 基本步骤 Vue.js的组件的使用有3个步骤:创建组件构造器.注册组件和使用组件. 下面的代码演示了这3个步骤: <

随机推荐