vuejs使用Element-ui封装dialog公用数据列表弹出插件

vuejs使用Element-ui封装dialog公用数据列表弹出插件

dialog代码

父控件调用方法

//下边的注释摘抄自vuejs官网:https://cn.vuejs.org/v2/guide/components.html#sync-修饰符
//在这种情况下，需要对一个 prop 进行“双向绑定”，这正是 Vue 1.x 中的 .sync 修饰符所提供的功能
//但也会导致问题，因为它破坏了单向数据流。由于子组件改变 prop 的代码和普通的状态改动代码毫无区别，当光看子组件的代码时，你完全不知道它何时悄悄地改变了父组件的状态
//上面所说的正是我们在 2.0 中移除 .sync 的理由。但是在 2.0 发布之后的实际应用中，我们发现 .sync 还是有其适用之处，比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。
//从 2.3.0 起我们重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。

......
export default {
	data() {
      return {
	       modalVisible : false,
	       ......
	  }
	}
}

总结

刚开始没有使用sync时，遇到问题如下：设置.visible.sync为prop中的属性，结果直接修改prop后，dialog并没有直接隐藏。所以主要还是.sync
的使用让dialog的显示和隐藏更简单快捷