解决 Element-ui中 对话框 (Dialog)中含子组件时,使用 refs 调用该子组件为 undefined 的问题

简介: 解决 Element-ui中 对话框 (Dialog)中含子组件时,使用 refs 调用该子组件为 undefined 的问题

问题:

当对话框 (Dialog)中包含子组件时,我们使用 this.$refs 试图获取该组件的 dom 并操作时,发现获取的 dom 为 undefined 导致后续的方法报错;

<template>
  <div>
    <el-dialog :visible.sync="propertyDialog" width="60%" center>
      <lineChart
        ref="chart"
        :xAxisArr="xAxisArr"
        :yAxisArr="yAxisArr"
      ></lineChart>
    </el-dialog>
  </div>
</template> 
<script>
import lineChart from "@/components/lineChart.vue";
export default {
  data() {
    return {
      xAxisArr: [],
      yAxisArr: [],
      propertyDialog: false,
    };
  },
  components: {
    lineChart,
  },
  methods: {
    showCharts() {
      this.propertyDialog = true;
      console.log(this.$refs.chart); 
      this.$refs.chart.drawLineChart();
    },
  },
};
</script>

2020062310470442.png

解决:

因为自己之前用过 refs 来调用子组件方法,但是没有遇到过这种问题,很是无奈加之彷徨。

后来在度娘怀里遨游一番,发现和 element-ui 框架有关系,总之什么关系呢,我也说不清啦。

传送门:Element-ui 官方文档相关章节

提示1:
Dialog 的内容是懒渲染的,即在第一次被打开之前,传入的默认 slot 不会被渲染到 DOM 上。
因此,如果需要执行 DOM 操作,或通过 ref 获取相应组件,请在 open 事件回调中进行。
提示2:
如果 visible 属性绑定的变量位于 Vuex 的 store 内,那么 .sync 不会正常工作。
此时需要去除 .sync 修饰符,同时监听 Dialog 的 open 和 close 事件,
在事件回调中执行 Vuex 中对应的 mutation 更新 visible 属性绑定的变量的值。

加上一个 this.$nextTick 就可以啦,这个回调函数的意思呢?


官方的用法说明:将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。

它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。


其实简单理解就是:等所有的DOM元素节点都渲染完成以后才执行其里面的方法。

具体什么意思呢, 请参考:Vue中 $nextTick() 与 Vue.nextTick() 原理及使用

showCharts(params) {
  this.propertyDialog = true;
  this.$nextTick(()=>{
    console.log(this.$refs.chart);
    this.$refs.chart.drawLineChart();
  })
},

2020062310470442.png

相关文章
|
3月前
|
前端开发 开发者 开发框架
JSF与Bootstrap,打造梦幻响应式网页!让你的应用跨设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,响应式设计至关重要,以确保不同设备上的良好用户体验。本文探讨了JSF(JavaServer Faces)与Bootstrap框架的结合使用,展示了如何构建响应式网页。JSF是一个基于Java的Web应用框架,提供丰富的UI组件和表单处理功能;而Bootstrap则是一个基于HTML、CSS和JavaScript的前端框架,专注于实现响应式设计。通过结合两者的优势,开发者能够更便捷地创建自适应布局,提升Web应用体验。然而,这种组合也有其局限性,如JSF组件库较小和较高的学习成本等,因此在选择开发框架时需综合考虑具体需求和应用场景。
48 0
|
4月前
element UI【解决方案】消息弹框被对话框遮挡($message消息框被dialog或$alert遮罩)
element UI【解决方案】消息弹框被对话框遮挡($message消息框被dialog或$alert遮罩)
189 3
|
4月前
|
前端开发
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
155 0
|
4月前
|
JavaScript
element-ui Cannot read properties of undefined (reading ‘name‘),data中写成集合的形式
element-ui Cannot read properties of undefined (reading ‘name‘),data中写成集合的形式
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能5
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能5
47 0
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能4
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能4
42 0
|
JavaScript
Vue中使用element-ui的el-dialog对话框,实现拖拽效果(整理)
Vue中使用element-ui的el-dialog对话框,实现拖拽效果(整理)
Vue3引入element-ui报错:Uncaught TypeError: Cannot read property ‘prototype‘ of undefined
配置无误、代码未报错,运行时页面空白,F12控制台报错: Uncaught TypeError: Cannot read property ‘prototype’ of undefined
349 0
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能5
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能5
50 0
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能3
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能3
53 0