前言
昨天拿到一个任务需要自己写组件, 然后就遇到这个问题了.
父组件中, 我需要在鼠标选中多选表格的一行时将这一行的数据对象传入子组件, 显然这不是个异步操作, 但是子组件那边怎么都拿不到值, 子组件需要在created
周期调用一堆函数, 函数里面需要用到这个传过来的表格数据对象.
但是在函数里怎么数据对象输出都是undefined
, 我大概对我的watch
做了4-5次改进, 都没有解决这个事情, 起初以为是没有深度监听, 然后认为是需要深度监听里把新对象里的每个值遍历赋值出来存储.
最后病急乱投医了直接觉得是createed周期太早了而取不到.
一、错误分析
首先我不应该把新值重新赋值到props的this.rawParams
…额是个低级错误, 这违背了Vue类似MVVM的通信原则.
其次我在父组件里组织这个对象的方式是使用obj.xxx = xxx
的方式, 这就是改变对象值, 会加大监听难度, 不过这篇也是围绕这点来说的.
我两天有一个猜想, props传值的时候直接传个新的对象(就是直接把一个做好的对象赋值到要传的变量), 和使用obj.xxx
的格式慢慢组织对象后传入, 这两种办法在被子组件监听时是否会有区别?
正好今天遇到这个情况, 顺手试一下, 我把两种情况各分一个章节来说.
二、如何监听一个对象整体的改变?
这就是我说的第一种情况, 直接组织好对象, 把整个新对象传入.
直接赋值一个新的对象更加易于监听到, 这就像直接赋值了一个String或者什么别的类型的变量:
<!-- 父组件内 -->
<ebec030i-res-display
:rawParams="rawParams"
>
</ebec030i-res-display>
//父组件事件
//你就想一个方法触发这玩意儿就好了, 不写了...
rowClick(row) {
let temParams = {
}
temParams.