本篇文章通过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数组随之改变，而子组件中绑定的数组确并没有随之改变