uni-app 实现组件刷新功能

╰+哭是因爲堅強的太久メ 2023-01-15 02:17 339阅读 0赞

组件页面：

<template>
    	<view>
         <text style="font-size: 18px;color: red;">原始值：{ { text}}</text>
         <button  style="width: 70%;height: 44px; background-color: #F0AD4E;color: #FFFFFF;font-size: 14px;line-height: 44px; margin:20px 0px 20px 0px; " type="default"     @click="demotext">改变值为5</button>
    		  <button  style="width: 70%;height: 44px; background-color: #0A98D5;color: #FFFFFF;font-size: 14px;line-height: 44px;" type="default"     @click="demo">刷新组件</button>
    	</view>
    </template>
    
    <script>
    	export default { 
    		name:"router-view",
    		data() { 
    			return { 
    				inject:["reloadAll"],
            text:0
    			};
    		},
        methods:{ 
          demo(){ 
            console.log("刷新了")
            this.$emit("mydemo");
           
          },
          demotext(){ 
            this.text=5;
          }
        }
    	}
    </script>
    
    <style>
    
    </style>

测试页面：

<template>
        <div class="app-file">
            <router-view v-if="isRouterAlive" @mydemo="refush"></router-view>
        </div>
    </template>
     
    <script>
      
       import   router   from  "../../components/router-view/router-view.vue"
    export default { 
        provide() { 
            return { 
                reloadAll: this.reloadAll
            }
        },
        data() { 
            return { 
                isRouterAlive: true
            }
        },
        methods: { 
            reloadAll() { 
                this.isRouterAlive = false
                this.$nextTick(() => { 
                    this.isRouterAlive = true
                })
            },
            refush(){ 
              this.reloadAll();
            }
        }
    }
    </script>
     
    <style lang="scss" scoped>
    </style>

效果图演示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]  
初始值默认为0，改变值后我们进行刷新，如果刷新，初始值为0，那就说明刷新成功。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 1]  
改变值为5

下一步：刷新组件：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 2]  
初始值变为0：说明刷新成功。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]: /images/20221022/bf0b4433f4284090862b82f9b59201b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 1]: /images/20221022/6bd892d150cd42a592def2222507088e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 2]: /images/20221022/1940783691cd4416bcef98a7ccc4ed88.png