zoukankan      html  css  js  c++  java
  • 触发Dialog中子组件方法,找不到方法问题

    触发Dialog中子组件方法,找不到方法问题

    问题来源

    在做项目的时候我在父组件中放置一个dialog,dialog中又存放了子组件,当打开dialog的时候同时触发子组件中的方法,但是就在这个时候,它报了一个找不到子组件中方法的错误

    问题原因

    是因为DOM元素还没有渲染完成导致的,当我们把dialog的visible属性设置为true的时候,子组件正在加载,这个对话框及其里边的DOM元素是有一个渲染的过程的,所以这个时候就可能拿不到里面的元素

    解决方法

    使用nextTick()方法

    nextTick()方法的作用:将回调延迟到DOM 更新循环之后执行。在修改数据时立即使用它,然后等待 DOM 更新,便可达到获取 更新后的节点 的目的。简单来说就是当界面完全渲染完之后,在进行操作。

    如果不了解nextTick方法的可以点击这个链接 : nextTick()用法总结

    我的解决方法:

    <--! 在vue界面的watch属性中监控 dialogFormVisible 属性,放它发生改变时 界面打开dialog进行渲染,这个时候想拿到渲染完成之后的initParamHtmlSS方法,所以就把调用子组件方法写在this.$nextTick的回调函数里,而this.$nextTick回调函数是界面完全渲染完成以后调用,这样就一定能拿到子组件中的方法 -->
    watch: {
        dialogFormVisible(value) {
          this.$nextTick(function() {
            if (value) {
    		<--!这是我要调用子组件中的方法-->
              this.$refs.paramDrawRef.initParamHtmlSS() // 前后加遮罩
            }
          })
        }
      }
    
  • 相关阅读:
    注册登录
    ASP.NET常用编程代码(一)
    HTML、CSS、JS、PHP 的学习顺序~(零基础初学者)
    如何学习javascript?(转)
    如何完全卸载SQL Server 2005
    如何给网页标题栏上添加图标(favicon.ico)
    网页制作常用代码
    网页颜色代码对照表
    ASP.NET常用编程代码(二)
    50个PHOTOSHOP快捷键技能!
  • 原文地址:https://www.cnblogs.com/blackblack/p/13921351.html
Copyright © 2011-2022 走看看