刷新子组件

用户点击查看，将编号传入，之后展示与编号相关的那条信息。
但是 子组件只创建一次，不刷新。导致 点击不同的 查看按钮，显示出来的dialog框中的内容都是第一次点击内容。

解决方案：
利用 v-if（销毁和重建）可以强制刷新子组件

<el-dialog title="查看"  :visible.sync="dialogFormVisible" destroy-on-close>
	//需要销毁重建的组件
    <edit-form v-if="forceRefresh"></edit-form> 
</el-dialog>

//触发事件
handleNoAnswer(index, row) {
		//forceRefresh 变量需要在data（） 中申明一下
      this.forceRefresh = false
      console.log(index, row)
      console.log(row.id)
      localStorage.setItem("ArticleNO",row.id);
      //强制刷新
      this.$nextTick(() => {
        this.forceRefresh = true
        this.dialogFormVisible = true
      })
      
    },

原理

Vue的重要概念：异步更新队列。
Vue在观察到数据变化时并不是直接更新DOM，而是开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。 Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际。

也就是说：Vue监听到数据变化但是不会立马直接更新试图，而是先建立一个队列，把跟这个数据有关的所有dom节点放进去，直到在下一个的事件循环“tick”中，Vue才 刷新队列并执行实际 (已去重的) 工作。重点来了，当所有dom 更新后，会触发nextTick回调函数。也就是说dom更新之后 nextTick（）被调用了！

nextTick（）的作用是：将回调延迟到DOM 更新循环之后执行。在修改数据时立即使用它，然后等待 DOM 更新，便可达到获取 更新后的节点 的目的。