vue弹窗组件的编写历程

在项目中我们多多少少会遇到弹出提示框或者对话框，对于这一类通用的地方可以将其封装成组件
对话框组件例如：



在点击操作过后弹出对话框或者提示框，想到的是肯定要传递一个信息到子组件中，告诉子组件显示出来，当然这种对于第一次点击肯定是会生效的，但是当你在不刷新页面的情况进行第二次点击肯定是没有效果了，只能对子组件进行包一层div来进行控制，例如对话框组件：



点击取消和确定后向父组件发送一个消息，将dialogFlag置为false，这样就可以通过控制 dialogFlag 来对子组件进行显示或者隐藏，
思考：如果自己的组件是这样的，对于别人来使用肯定是不方便，还要在外层包一层div来进行控制

优化：
isShow是否显示子组件



通过传递isShow来是否显示子组件，当然点击取消和确定后向父组件发送一个消息来改变isShow的值，这样就可以控制子组件的显示与隐藏，这样写还是存在缺点：显示与隐藏还是不能再子组件中进行控制，任然需要在父组件中进行处理，太过于依赖父组件。
思考：如何才能在子组件中进行控制呢？

通过查看其它组件库，例如：vux，mint-ui，iview弹框组件都是不依赖父组件，通过v-model来进行绑定，并且都向外面发送了一个消息



看到这个一开始以为是他们自己的方法，但是发现三个组件都是这样写，由此思考：这到底自己的方法还是官方的方法，但是也没有在父组件中看到对input进行处理，猜测是官方的方法，当看到这句的时候，才引起重视，更加确定是官方的方法



官方文档说明：



API说明：



最终形态
v-model可以在组件上使用，因此弹框组件最终的形态，通过v-model来绑定 isShow



子组件中：props传递数据的value其实就是我们在子组件上v-model双向绑定的值，监控value是否改变来对isShow经常赋值，点击取消和确定将isShow置为false，监控isShow是否改变向外发送一个input事件来进行更新v-model的值