本文详细解析了在Vue中遇到的`this.$refs.noticeContentLater`为undefined的问题，指出问题在于未正确获取子组件元素。文章介绍了多种在Vue中获取和更新子元素的方法，包括使用`$refs`、监听事件以及直接操作DOM的替代方案，并强调了Vue中避免直接操作DOM的原则。
不是innerHTML是undefined，而是this.$refs.noticeContentLater是undefined。你并没有获取到元素。
------------------------------更新答案----------------------------
获取子元素变量的方法由很多种，你使用this.$refs并没有错, 但是子组件要及时更新对应变量。例如：
子组件
example
export default {
data () {
return {
noticeContentLater: null
}
},
update: function () {
this.noticeContentLater = document.getElementById('main')
}
}
同样也可以使用监听事件的方法, 例如在子组件update种触发父组件监听的事件，更新变量，这样就需要this.$refs了。如：
父组件
export default {
data () {
return {
myDom: null
}
},
method: {
fUpdate: function (element) {
this.myDom = element
}
}
}
子组件
example
export default {
update: function () {
this.$emit('updateDom', document.getElementById('main'))
}
}
当然，不管如何，感觉Vue并没有直接操作Dom元素的必要，想要更新元素的属性，提前绑定好就可以了。
扫一扫
2953
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
