Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

强制组件重新渲染 #19

Open
huangshuwei opened this issue Nov 3, 2018 · 0 comments
Open

强制组件重新渲染 #19

huangshuwei opened this issue Nov 3, 2018 · 0 comments
Labels

Comments

@huangshuwei
Copy link
Owner

前言

最近在用element ui做一个后台系统,发现当菜单数据变更后,菜单显示异常的问题,通过 vue 的devtool 发现,element ui 的菜单组件并没有很好的处理数据变化的渲染重置问题,比如默认菜单属性值变更后并不生效,当然还有其他的问题。

方案一

我想到的方案是当菜单数据变更后,通过watch 监听,先去销毁当前的菜单组件,然后再重现渲染。使用 v-if 可以解决这个问题

<template>
   <third-comp v-if="reFresh"/>
</template>

<script>
   export default{
       data(){
          return {
                reFresh:true,
                menuTree:[]
            }
       },
       watch:{
             menuTree(){

                  this.reFresh= false
                  this.$nextTick(()=>{
                    
                    this.reFresh = true
                })
            }
       }
}
</script>

这种方式虽然可以实现,太不优雅

方案二

通过vue key 实现,原理官方文档。所以当key 值变更时,会自动的重新渲染。

<template>
   <third-comp :key="menuKey"/>
</template>

<script>
   export default{
       data(){
          return {
                menuKey:1
            }
       },
       watch:{
             menuTree(){

                ++this.menuKey
            }
       }
}
</script>

完...

@huangshuwei huangshuwei added the vue label Nov 3, 2018
@huangshuwei huangshuwei changed the title 强制组件重新渲染(重置) 强制组件重新渲染 Oct 8, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant