vue element

vue element

vue element-ui dialog组件 在打开dialog和关闭dialog的时候需要注意的地方

先上链接：组件详细点击这里

在使用dialog 内嵌表单的时候，我们常常需要在关闭dialog的时候，通过回调进行下一步操作

官方实例中提到：

本例通过显式改变v-model的值来打开 Dialog，此外我们还为 Dialog 实例提供了open和close方法，可以通过调用它们来打开/关闭 Dialog。

由此可见官方是提供了事件的方法，拉到最下面我们会发现有如下说明：

先看第一个：方法

每个 el-dialog 实例都暴露了如下方法，用于在不显式改变 v-model 值的情况下打开 / 关闭实例

这句话有点不好理解，我理解的是，打开和关闭dialog实例有两种方法：
一种是通过v-model的值，即

<el-button type="text" @click="dialogVisible = true">点击添加 Card</el-button>
<el-dialog title="提示" v-model="dialogVisible">

另外一种则是通过上面提到的方法，open()，close()。通过调用这两个方法，就可以在不改变v-model值得情况下，打开或者关闭实例，即

<el-button type="text" @click="open()">点击添加 Card</el-button>

但是！！！ 结果并不是我想象的那样，通过第二种方式我并没有打开实例。。。。百思不得其姐！

再看第二个：事件
这才是我需要的东西！通过监听这两个事件，在不管通过什么方式，打开或者关闭dialog时，我就能拿到回调了。

<el-dialog @open="openCard()" @close="closeCard()" title="提示" v-model="dialogVisible">

methods：

closeCard: function(){console.log('close')
},
openCard: function(){console.log('open')
}