1. Definition of $nextTick

Official note:

  • Defer the callback until after the next DOM update cycle. Use the data immediately after you modify it, and then wait for DOM updates.
  • It’s the same as the global methodVue.nextTickSame, the difference is callbackthisAutomatically bind to the instance calling it.

2. Application scenarios

Generally used:

When a parent component introduces a child component, the parent component calls the child’s methods.

If this method is not adopted, it is as follows:

<template> <div> <! </homeData :width="width" :height="height" :id="id" :dataObj="dataObjEcharts" ref="hd" > </template> <! This.$refs.hd.drawLine(); this.$refs.hd.drawLine(); }Copy the code

If you call a child component’s method directly, you may get an error or invalid execution.

So we need to wrap this function around:

<! ParentFn (){this.$nextTick() => {this.$refs.hd.drawLine(); }); }Copy the code

3. Summary

So, in a nutshell:

Calling a subcomponent method with this function wrapped around it means that the dom of the subcomponent is loaded (updated) before executing its methods.