不是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元素的必要,想要更新元素的属性,提前绑定好就可以了。