Vue中dialog如何清空子组件的值: open和close的用法（$nextTick（[callback，context]））

最近学习Vue的时候，遇到了通过dialog打开子组件， 子组件中的值无法被清空，查阅API后，发现可以用open和close。

<el-dialog :visible="userUpdateVisible" width="800px" @open="onUserUpdateVisibleOpen()" @close="closeUserAdd()" >
          <el-tabs v-model="activeName" @tab-click="handleTabClick">
            <el-tab-pane :label="userId?'修改人员基本信息':'新增人员基本信息'" name="user-base-info">
              <user-router :userId="userId" @closeUserAdd="closeUserAdd()" ref="user-router" @refreshData="search()" >

               </user-router>
            </el-tab-pane>
          </el-tabs>  
    </el-dialog>

 export default {
    methods:  {
        onUserUpdateVisibleOpen(){
           this.$nextTick(() => {
              let form = this.$refs["user-router"];
              form.initPage();
            });
        },
        closeUserAdd(){
          this.userId = ""
          this.userUpdateVisible=false;
          this.search()
        },
    }
 }

其中涉及到Vue的原型方法调用：

• 参数：

  • {Function} [callback]
  • {Object} [context]

• 用法：

  将回调推迟到下一个DOM更新周期后执行。在更改了一些数据以等待DOM更新后立即使用它。

  // modify data
  vm.msg = 'Hello'
  // DOM not updated yet
  Vue.nextTick(function () {
    // DOM updated
  })
  
  // usage as a promise (2.1.0+, see note below)
  Vue.nextTick()
    .then(function () {
      // DOM updated
    })

  2.1.0+中的新增内容：如果未提供回调，则返回Promise，并且在执行环境中支持Promise。请注意，Vue没有附带Promise polyfill，所以如果你的目标浏览器本身不支持Promises（看着你，IE），你必须自己提供一个polyfill。

      参考自：

      https://vuejs.org/v2/api/?#Vue-nextTick