zoukankan      html  css  js  c++  java
  • vue中三层组件结构,如何在展示第三层组件时,让第三层组件中的某个方法执行

    问题描述:

    如下图,页面是一层组件,弹窗a-modal是二层,a-modal中的树形结构a-tree组件是第三层组件,当第一次打开弹窗时,会执行第三层a-tree的created()方法,但是关闭弹窗再次打开时,就不会再执行第三层a-tree组件的created()方法了,因为第一次打开弹窗组件时,a-tree组件已经创建了,只是关闭弹窗后不显示而已,然后打开弹窗,又显示了,但并不会重新创建该a-tree组件。

    带来的影响是,当希望每次打开弹窗时,a-tree组件中的树形结构数据并不是最新的,而是在第一次打开弹窗时created()方法中获取的。

    解决思路有两个:

    1、第三层a-tree组件中的属性结构数据从第二层弹窗组件打开时获取并传入第三层a-tree组件中

    2、每次打开弹窗组件时,把三层组件的v-if绑定的变量置为false,然后再改为true,这样a-tree组件就会重新渲染,重新执行created()方法,那在created()方法中去查询树形结构数据就可以了

    这里第1中方法有问题,就是子组件中需要在获取数据前设置loading=true,获取数据后把设置loading=false,有个加载的过程,如果通过向组件传值的方式,还得单独处理loading的处理,比较麻烦

    我这里用的第2中方法,可以方便的处理loading的变量赋值处理,感觉这样也比较符合通常的数据加载方式。

     二层弹窗组件init方法中重新渲染三层a-tree组件:

    三层组件中tree定义:

  • 相关阅读:
    Linux安装JDK1.8
    两台Linux主机之间文件的复制
    Tigase数据库结构(1)
    应用架构之接入层原理
    MySQL开发规范
    Google MapReduce到底解决什么问题?
    使用 RestTemplate 调用 restful 服务
    App开放接口API安全性 — Token签名sign的设计与实现
    深入探讨 Java 类加载器
    Java 的 I/O 类库的基本架构
  • 原文地址:https://www.cnblogs.com/xiaxiaoxu/p/14804982.html
Copyright © 2011-2022 走看看