Question

我正在使用vue单个文件组件处理聊天工具。我遇到了问题，root .vue有子.vue和孙子.vue，我想观察者孩子＆＃ 39;渲染，获取根div的高度，改变滚动条位置，我使用了$ nextTick（）http://rc.vuejs.org/api/#vm-nextTick,but它无法观察儿童的渲染，所以，有什么方法可以试试吗？非常感谢。

Answer 1

您可以使用vue的父子通信来了解您的孩子何时渲染。 Vue提供了以下event interface：

使用$ on（eventName）
使用触发事件 $发射（eventName的）

父组件可以直接在使用子组件的模板中使用v-on侦听子组件发出的事件。

因此，您可以在子组件lifecycle hook中发出一个事件，如下所示：

mounted () {
  this.$emit('childRendered')
}

在父组件中，您可以收听此事件或创建方法，如下所示：

this.$on('childRendered', function () {
  // change scrollbar position
})

父母子女沟通的一个例子：fiddle

Answer 2

这只是为了让每个人都能轻松看到 Saurabh 在他的回答的评论中提到的解决方法。我还使用了 updated 生命周期来等待 DOM 完成渲染和修补，然后再对其进行操作。

由于 updated 不保证所有子组件也都被重新渲染，所以在更新的内部使用 vm.$nextTick。

updated: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been re-rendered
  })
}

如何观察孩子vue完成渲染

2 个答案: