Vue中this.$nextTick( ) 的用法及详细介绍

理解：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

举个例子：假如a组件里面的表格的的  爱好：唱歌  数据点击后-----跳转到b组件-----然后b组件表单的要显示a组件当前行的数据；

分析：a组件和b组件时兄弟关系；

            给a组件的爱好列绑定点击事件，事件内容为$emit带上当前行相应的参数给父组件。

             父组件里面的接收参数，事件为赋值；在a组件里：

 在a组件里面：

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="name"
      label="姓名"
      width="150">
    </el-table-column>
   <el-table-column
      label="爱好"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">唱歌</el-button>
      </template>
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄"
      width="120">
    </el-table-column>
    <el-table-column
      prop="job"
      label="职业"
      width="300">
    </el-table-column>
  </el-table>
</template>
export default{
    data(){
        return{
            formData：{
                name："",
                age:"",
                job:"",
                hobby:"",
            }        
        }
    }
}

 在父组件里：

<template>
    <div>
        <keep-alive>
            <component
              :is="activeName"
              @handleClick="handleClick"
              :activeName="activeName"
               :ref="activeName" 
            >
                
            </component>
        <keep-alive>
    </div>
</template>

export default{
    data(){
        activeName:"a"
         formData：{
                name："",
                age:"",
                job:"",
                hobby:"",
          }      
    },
    methods:{
        handleClick(){
            this.activeName = "b"
            this.$nextTick(()=>{
            this.$refs[this.activeName].formData.name = row.name
            this.$refs[this.activeName].formData.age = row.age
            this.$refs[this.activeName].formData.job= row.job
            this.$refs[this.activeName].formData.hobby= row.hobby
            })
        }
    }
}