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定义:

  • 相关阅读:
    C++11学习笔记
    孙鑫MFC学习笔记20:Hook编程
    孙鑫MFC学习笔记19:动态链接库
    孙鑫MFC学习笔记18:ActiveX
    孙鑫MFC学习笔记17:进程间通信
    孙鑫MFC学习笔记16:异步套接字
    孙鑫MFC学习笔记:15多线程
    ionic2 使用slides制作滑动效果的类型选择栏
    JavaScript简明教程之Node.js
    ionic2实战-使用Chart.js
  • 原文地址:https://www.cnblogs.com/xiaxiaoxu/p/14804982.html
Copyright © 2011-2022 走看看