this.$nextTick 的使用

LUNA~

已于 2023-07-24 11:10:21 修改

阅读量231

点赞数

文章标签： javascript 前端 vue.js

于 2023-07-24 11:09:53 首次发布

本文链接：https://blog.csdn.net/CMDN123456/article/details/131891877

版权

官方回答：

案例：

官方回答：

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

简单来说就是Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。

案例：


_this.dialogVisibleFlow = true; //对话框是否显示
console.log(_this.$refs.tableData, "表格1"); //打印子组件表格数据   打印结果：undefined
_this.$nextTick(() => {
  console.log(_this.$refs.tableData, "表格2"); // 打印结果：{XXX}是有值的
   _this.$refs.tableData.Form = { 
    AgreeFlag: "1",
    ID: _this.multipleSelection.ID, 
   ;
_this.$refs.tableData.row = _this.multipleSelection;
});