[vue]vue 父组件如何在所有子组件都渲染完成后去操作DOM

楼主^#

更多发布于：2017-12-27 16:56

我的需求：
等子组件渲染完成后，父组件去操作子组件的DOM，进行相关的操作。

解决方法：
在updated事件中去写对应的逻辑

// updated中这么试试
this.$nexrTick(function(){
console.log("dom渲染完了");
});

关于nexrTick:
nextTick的由来：
由于VUE的数据驱动视图更新，是异步的，即修改数据的当下，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。

nextTick的触发时机：
在同一事件循环中的数据变化后，DOM完成更新，立即执行nextTick(callback)内的回调。

示例如下：

// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})
// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick()
  .then(function () {
   // DOM 更新了
  })

参考：https://segmentfault.com/q/1010000008531974/a-1020000008535459

喜欢0

知识需要管理，知识需要分享

发帖回复

« 返回列表

您需要登录后才可以回帖，登录或者注册

返回顶部

公众号

[vue]vue 父组件如何在所有子组件都渲染完成后去操作DOM

最新喜欢：