组件间传递参数
困境
在vue组件的data内，定义了很多的变量，并且这些变量都需要传递给子组件。如下：
data() {
return {
reviewTitle: "",
appraisalNo: "",
appraisalStatus: "",
appraisalId: ""
}
}那么在模板内，子组件的就要写很多的props值来接受，代码冗长，不利于统一维护。一旦未来要增加了更多要传递给子组件的单一变量props值，那么就需要每次到模板内再次手动增加新的props值。很繁琐。
<Child
:reviewTitle="reviewTitle"
:appraisalNo="appraisalNo"
:appraisalStatus="appraisalStatus"
:appraisalId="appraisalId"
></Clild>优化
优化思路，使用v-bind指令一次性绑定多个attribute。
具体实现
js 代码
data() {
return {
reviewTitle: "",
appraisalNo: "",
appraisalStatus: "",
appraisalId: "",
/** 传递给子组件的 全部props值的配置数组 填充字符串数组即可 */
get toFramePropsConfigList() {
return ["reviewTitle", "appraisalNo", "appraisalStatus", "appraisalId"];
},
/** 传递给弹框的 集中整理的 props 对象 使用 v-bind="toFramePropsObj" 统一传递批量的props值 */
get toFramePropsObj() {
let list = this.toFramePropsConfigList.map(item => ({
[item]: this[item]
}));
return Object.assign({}, ...list);
}
}
}模板写法
<Child v-bind="toFramePropsObj"></Clild>写法解释
用getter函数来定义一个动态接收全部目标变量的，且实现自动更新取值的变量，命名为toFramePropsObj。之所以选用getter函数定义伪属性，是因为要借助getter函数实现动态接收生成对象。这里也可以考虑使用vue的computed来实现。
使用getter函数只能实现自动合成对象，保证数据是最新的。但是生成对象的逻辑也是需要自己编写的。如果简单的写成{var1: this.var1,var2:this.var2}的形式，那么代码也会很繁琐。每次新增变量时，也还需要在这里做编写与配置，没有达到优化简化的目的。所以我们要针对生成对象的逻辑写代码来实现优化。
首先观察数据结构，明确要生成的目标：
{
reviewTitle: this.reviewTitle,
appraisalNo: this.appraisalNo,
appraisalStatus: this.appraisalStatus,
appraisalId: this.appraisalId
}我们要生成的目标在键名上是相同的，我们就用字符串的思路来统一配置生成键值。考虑使用动态属性名的实现键名的动态生成。即{ [keyname]:this.[keyname] }。
定义字符串数组，观察数组与目标对象的关系：
["reviewTitle", "appraisalNo", "appraisalStatus", "appraisalId"];字符串数组与目标对象是高度相似的，可以考虑数组遍历的方式获取字符串并在对象字面量内使用动态属性名。
list.forEach( keyname => ({ [keyname]: this.[keyname]} ))但是，如果使用了遍历数组的思路，那么生成出的对象还要再添加到一个容器内储存。考虑映射的思路，选择用数组方法 map 来代替 forEach 方法。不仅可以遍历数组项，还可以同时实现生成项的收集。因为 map 方法返回的是一个数组，就相当于默认实现了数据的收储。
const resList = list.map( keyname => ({ [keyname]: this.[keyname]} ))有一个小细节要注意，我们总是默认在数组方法的回调函数内用匿名函数的形式，而且总是使用箭头函数。箭头函数在返回一个对象时，需要加上括号。
观察返回的函数结构，距离可以使用的目标对象仍旧有一定的距离。不推荐再使用遍历的方式来手动地，一个一个地使用拓展运算符合并生成对象，不建议使用累加的思路来生成。可以考虑使用集中赋值的方式来生成对象。Object.assign()的填参特点就特别适合这样的思路。相当于如下的代码：
Object.assign({}, { reviewTitle: "someValue" }, { appraisalId: "alsoSomeValue" });Object.assign()会合并全部可以遍历属性值并添加到目标对象，并最后返回结果。至此已经完成了目标对象的构建。
参考资料
贡献者
ruan-cat 阮喵喵 阮中楠 ruan-cat.台式机 阮中楠-台式电脑