vue 在组件中使用$nextTick以及mounted中接收不到props的解决方法

原创已于 2022-07-26 17:26:36 修改 · 2.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-07-26 17:25:49 首次发布

前端专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了Vue.js中的`this.$nextTick`方法，它用于在DOM更新后执行回调。在组件的`mounted`生命周期钩子中，如果需要在数据变化后获取更新的DOM，可以借助`this.$nextTick`。文章还提到了`created`和`mounted`两个生命周期钩子的区别，并展示了如何在`mounted`中正确使用`this.$nextTick`来访问props的属性值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先我们先了解下什么是this.$nextTick

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。（可以操作数据，发送ajax请求）

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。（操作dom）

而我们想要在mounted中获取到props中的属性值，就需要用到this.$nextTick

mounted() {
    this.$nextTick(function () {
        this.data
    })
}

官方$nextTick解释