vue+elementui 打开弹窗 但是弹窗的接口只会初始调用

1.在使用element的dialog弹窗的时候

<el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="68vw"
    >
      <Info></Info>
    </el-dialog>

但是如果你是在列表页使用 根据每次传入的id不同获取不同的数据的时候，你会发现只有在第一次使用的时候才能调用接口。这是为什么呢？让我们来看一个例子。

image.png

当我们点击关闭的时候来看一下右侧代码的变化吧~~

image.png

---

---

这时候我们在点击新增按钮的时候，element这边是采用v-show来控制，v-show采用display：none来控制是否显示，并没有销毁dom元素，这个时候我们试想下这种场景如果table列表点击查看弹出弹窗，弹窗需要掉接口初始化数据，这时候你会发现只有在第一次的时候才会调接口，第二次的时候就没有调接口。这是因为v-show并没有销毁，你在弹窗组件dialog中

created(){
this.init()
}
methods:{
init(
调接口
)
]

这个时候你会发现init只会执行一次的，因为你关闭的时候只是display:none掉，所以下次在dispaly:block的时候created这个生命周期只会执行一次的啊。那么如何解决这个问题呢？

2.修改的办法也很简单，在dialog层加一个v-if判定

<el-dialog
      :title="title"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      width="68vw"
    >
      <Info></Info>
    </el-dialog>

给这个弹窗加v-if那么下次关闭的时候就会销毁这个弹窗，下次在进来的时候他就会在调用created这个生命周期函数。

小伙伴们，这样讲明白了吗？