vue/uniapp 强制组件重新渲染的几种方式

作者: web 发布时间: 2022-10-25 浏览: 2435 次 编辑

vue/uniapp 强制组件重新渲染的几种方式

问题:当父组件向子组件传值时,如果改值存在多层数组/对象嵌套,此时改数据变动时,可能造成在子组件中不会重新渲染。

解决方案:如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<template>
   <new_drawer :key="menuKey"  :data='newData'/>
</template>
  
<script>
   export default{
       data(){
          return {
                menuKey:1,
                newData:[
                    {
                        tital:10,
                        options:[
                            {
                                tital:102
                            }
                        ]
                    }
                ]
            }
       },
       methods:{
             menuTree(){
                this.newData.forEach((item)=>{
                    item.options.forEach((item1)=>{
                        item1.tital=110
                    })
                })
                ++this.menuKey    //newData数据嵌套太深,需要这种方式才能渲染出来改变的newData数据
            }
       }
}
</script>