events: { /** * 转发事件 * @param {string} eventName 事件名称 * @param {object} arg 事件参数 * @return {null} */ 'transmit': function (eventName, arg) { this.$broadcast(eventName, arg); } },
其次是模态框组件内部接收从父级组件传递过来的确定和取消按钮所触发的事件名，点击取消和确定按钮的时候触发
// 接收事件，获得需要取消和确定按钮的事件名 events: { 'tip': function(obj) { this.events = { cancel: obj.events.cancel, confirm: obj.events.confirm } } } // 取消按钮 cancel：function() { this.$dispatch('transmit',this.events.cancel); } // 确定按钮 submit: function() { this.$dispatch('transmit',this.events.submit); }
在父级组件中调用模态框如下：
this.$dispatch('transmit','tip',{ events: { confirm: 'confirmEvent' } }); this.$once('confirmEvent',function() { callback(); }
先是传递tip事件，将事件名传递给模态框，再用$once监听确定或取消按钮所触发的事件，事件触发后进行回调。
这种方法看起来是不是很晕？所以vue 2.0取消了$dispatch和$broadcast，我们在最近的项目中虽然还在用1.0，但是也不再用$dispatch和$broadcast，方便以后的升级。
使用emit来触发
这种方法来自vue-bootstrap-modal,点击取消和确定按钮的时候分别emit一个事件，直接在组件上监听这个事件，这种做法的好处是事件比较容易追踪。
// 确定按钮 ok () { this.$emit('ok'); if (this.closeWhenOK) { this.show = false; } }, // 取消按钮 cancel () { this.$emit('cancel'); this.show = false; },
调用：
<modal title="Modal Title" :show.sync="show" @ok="ok" @cancel="cancel"> Modal Text </modal>
但是我们在使用的时候经常会遇到这样的场景，在一个组件的内部，经常会用到多个对话框，对话框可能只是文字有点区别，回调不同，这时就需要在template中为每个对话框都写一次，有点麻烦。
参考资料