关于this.$refs.xxx为undefined的问题

目录

1.问题描述

2.解决思路

3.测试结果

4.测试结果分析

5.解决方法

6.保留代码方便后续复制/粘贴

---

1.问题描述

2021年08月23日在开发的时候，遇见一个问题，我想获取<el-upload/>对象，然后把该对象的fileList属性置为空；

当我用console.log分别去打印this.$refs、this.$refs.querForm、this.$refs.querForm.uploadfile、this.$refs.uploadfile时却打印不同的结果：

this.$refs	VueComponent，包含uploadfile
this.$refs.querForm	VueComponent
this.$refs.querForm.uploadfile	undefined
this.$refs.uploadfile	undefined

结果如下图：

2.解决思路

既然涉及到$refs，那么我就在子组件、父组件中把生命周期回调函数都输出日志，我看看到底是什么情况？

3.测试结果

当我点击菜单时，打印的日志：

 当我点击【修改】按钮后，打印的日志：

4.测试结果分析

当父组件初始化的时候，<el-dialog/>并不会进行初始化，只有当<el-dialog/>要显示的时候，<el-dialog/>才会初始化，进而把<el-dialog/>所引用的子组件进行初始化，因此，在父组件的methods中调用this.$refs.XXX的时候，报undefined；

5.解决方法

<el-dialog/>有个【open】回调函数，通过这个回调函数来获取子组件；

6.保留代码方便后续复制/粘贴

beforeCreate() {   console.log('XXXXXXXXXXXXXX--------------beforeCreate') }, created() {   console.log('XXXXXXXXXXXXXX--------------created') }, beforeMount() {   console.log('XXXXXXXXXXXXXX--------------beforeMount') }, mounted() {   console.log('XXXXXXXXXXXXXX--------------mounted') }, beforeUpdate() {   console.log('XXXXXXXXXXXXXX--------------beforeUpdate') }, updated() {   console.log('XXXXXXXXXXXXXX--------------updated') }, beforeUnmount() {   console.log('XXXXXXXXXXXXXX--------------beforeUnmount') }, unmounted() {   console.log('XXXXXXXXXXXXXX--------------unmounted') }