VUE 弹窗组件开发？

Question

最近需要开发一个弹窗的组件，想了一个思路不知道靠不靠谱。

创建一个vuex的状态开关去控制弹窗的显示与隐藏。

有两种弹窗的风格， 只有一个确定按钮的提示框， 还有就是一个确定 或取消的选择框（暂时只想到这两种）

问题是：点击后的回调。 是通过 <pop :回调1=“回调1”></pop> 还是为确定， 或取消，设置一个方法，通过$emit 传到父组件。父组件再去写回调？

Answer 1

我觉得这种弹框组件，想要设计一个灵活的显示隐藏的方法。

1.在组件内定一个函数处理显示隐藏，控制显示隐藏的变量设置通过属性传递我觉得不能用vuex保存在store中，因为一个弹框组件是单独的个体，用完即释放了，没有必要用store来保存）
2.组件上设置一个属性来重写显示隐藏的方法，可以满足一些特殊需求（在显示隐藏的时候，做些其他操作和业务逻辑的处理）
3.事件传递，在子组件内使用 $emit发出事件，父组件中通过监听事件来处理

栗子我就不写了，你应该能看懂我的意思吧。

Answer 2

1.显示隐藏 直接通过父组件的props传进去就可以了，不用vuex。

2.确定和取消，都有个共同的事情要做，就是$emit父组件，该把'我'隐藏起来了。在父组件的回调里，设置隐藏，子组件自然就响应了。

Answer 3

弹窗这么小的东西就别用到Vuex了，用组件件的通讯就可以了。

Answer 4

在确定 和 取消 按钮上的点击事件上加个事件就好了

// modal component
....
<button @click.native="cancel"></button>
....

....
methods {
 cancel () {
    this.$emit('modalcancel')
    }
......
//farther components
<modalcomponent @modalcancel="oncancel"/>