Vue子组件状态更新
背景:在一个页面多次重复的使用同一个子组件(比如在列表里根据数据不同重复渲染该子组件)时,由于数据的改变子组件状态未能得到及时的更新例子如下:数据以表格的形式显示出来,循环的渲染若干行表格,七中有一列是引入子组件如下所示子组件如下:export default{props: ['name'],data() {
·
背景:在一个页面多次重复的使用同一个子组件(比如在列表里根据数据不同重复渲染该子组件)时,由于数据的改变子组件状态未能得到及时的更新
例子如下:
数据以表格的形式显示出来,循环的渲染若干行表格,七中有一列是引入子组件如下所示
<tr v-for="(item,index) in goods_list">
<td>
<edit-name :name="item.goods_alias"></edit-name>
</td>
</tr>
子组件如下:
export default{
props: ['name'],
data() {
return {
oldName: this.name || '暂无',
}
},
此时数据如下:
goods_list: [{goods_allias:'连衣裙'},{goods_allias:'上衣'},{goods_allias:'裤子'},]
此时渲染效果如下:
连衣裙 |
|
裤子 |
然后通过ajax请求得到另外一组数据,数据如下:
goods_list: [{goods_allias:'帽子'},{goods_allias:'手套'},{goods_allias:'袜子'},]
但是此时渲染效果如下:
连衣裙 |
上衣 |
裤子 |
表格看起来没有任何变化,这是因为Vue组件的高效利用,Vue并没有因为数据的变化而将整个子组件从头到尾的重新渲染一遍
而是将利用已有的组件,只更改数据,但是以当前没有检查到数据的变化,所以做如下更改
1.新增watch监听数据的变化
watch: {
name(val){
this.oldName = val || '暂无';
}
}
此时随着数据的变化能够正常的渲染出列表
更多推荐
已为社区贡献6条内容
所有评论(0)