子组件改变时,父级进行相应改变

Vue 2018-06-12

有这样的需求
在父级table中传入一行数据到子组件中显示,但现在要求对数据进行增、删、改、查,刚好都在子组件中操作,如果不更新父组件会有脏数据。

怎么做呢,办法到挺多的,

和同事讨论最简单的方式是:改变子集的时候通知父级的一个事件,叫他做一点事就OK了,

譬如:
//亮点:rendern此时事件不用加@,如varChange不是@varChange

return h(expandRow, {
   props: {params: params},
       on:{
           varChange:(d,ro,m)=>{thisApp.tableExpandChange(d,ro,m)}
       }
})

//子集有数据改变时

tableExpandChange:function (d,ro,m) {
    let thisApp = this;
    this.$delete(thisApp.tableData[d.index].children[ro].children,m);
},

//子组件改变时传参

self.$emit('varChange',self.params,ro,m);

本文由 wenyi 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

还不快抢沙发

添加新评论