理解:将回调延迟到下次 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
})
}
}
}