Vue2 中如何在App.vue中保证当前页面的所有子组件加载并渲染完毕才执行特定逻辑？

  • Z时代
  • 2024-02-15
  • 分类：IT

Vue2 中如何在App.vue中保证当前页面的所有子组件加载并渲染完毕才执行特定逻辑，测试mounted中并不能实现。

回答：

你可以尝试使用Vue.nextTick()

什么是Vue.nextTick()？？

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

所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；

理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数

   created() {
      this.$nextTick(()=>{
        this.$refs.str.value = '西瓜'
        }
      )
    },

回答：

可以在父组件中定义一个对象，记录各子组件的状态，监控该对象，所有子组件加载并渲染完毕才执行特定逻辑
父组件：
watch: {

stateObj: {
  handler(n, o) {
    if (n && n.children1 == 'mounted' && n.children2 == 'mounted') {
      // 执行特定逻辑
    }
  },
  deep: true,
        immediate: true
},

},
data() {

return {
  stateObj: {
    children1: '',
    children2: '',
  }
}

},
子组件：
mounted() {

this.$parent.stateObj.children1 = 'mounted'

},

回答：

需要等子组件渲染完毕才执行特定逻辑，说明父子组件具有很强的耦合。
可以使用provide/reject 来处理这种逻辑。
每渲染一个子组件调用add在父组件注册一个，在子组件渲染完毕后调用reject反馈给父组件，父组件监听注册列表全部渲染完毕，则执行特定逻辑。

这个方式也可以用状态管理实现pinia，vuex。但逻辑会复杂一些

以上是 Vue2 中如何在App.vue中保证当前页面的所有子组件加载并渲染完毕才执行特定逻辑？ 的全部内容， 来源链接： utcz.com/p/935200.html

回到顶部