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 method
Vue.nextTick
Same, the difference is callbackthis
Automatically 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.