通过 this.$refs.myform 获取子组件实例报错为什么

通过 this.$refs.myform 获取子组件实例报错可能有以下几个原因：

1. 子组件未定义 ref 属性：如果子组件没有定义 ref 属性，那么在父组件中使用 this.$refs.myform 获取子组件实例时就会报错。因此，需要在子组件中添加 ref 属性，例如：<myform ref="myform"></myform>。

2. 子组件的 ref 属性与父组件中的引用名称不一致：如果子组件的 ref 属性名称与父组件中使用的引用名称不一致，也会导致通过 this.$refs.myform 获取子组件实例报错。父组件中的引用名称必须与子组件的 ref 属性保持一致。

3. 父组件访问子组件实例的时机不正确：在父组件的生命周期函数或方法中，通过 this.$refs.myform 访问子组件实例的时机也会影响是否报错。如果在父组件的 created 或者 mounted 钩子函数中使用 this.$refs.myform，可能无法获取到子组件实例。这是因为在这些钩子函数执行时，子组件可能还未被完全渲染到父组件中。可以考虑在父组件的 updated 钩子函数中使用 this.$nextTick 包裹来保证在子组件渲染完成后再访问子组件实例。

总之，在使用 this.$refs.myform 获取子组件实例时，需要确保子组件定义了对应的 ref 属性，并且在适当的时机进行访问，这样可以避免报错。

相关问题

this.$refs.video.$watch(() => { this.videoIndex = this.$refs.video.videoIndex return this.$refs.video.videoIndex })

这段代码是在Vue.js中使用$refs属性来获取视频元素，并使用$watch方法监听视频元素的videoIndex属性的变化。一旦videoIndex属性发生变化，就会触发回调函数，将其赋值给组件中的videoIndex属性，并返回新的videoIndex值。这段代码的作用可能是用于实现视频播放器的功能，例如在当前播放的视频发生变化时更新相关信息等。

this.$refs.video.$watch(() => { this.videoIndex2 = this.$refs.video.videoIndex return this.$refs.video.videoIndex })

这段代码与上面的代码相似，也是在Vue.js中使用$refs属性来获取视频元素，并使用$watch方法监听视频元素的videoIndex属性的变化。不同之处在于，回调函数将获取到的videoIndex值赋值给了组件中的videoIndex2属性。这段代码可能是用于实现多个视频播放器的功能，在当前播放的视频发生变化时更新相关信息并存储到videoIndex2属性中。