this.modelServe.confirm({
msg: '返回后数据不会被保存,确认?',
ifBtn: true
}).then(_ => {
this.goBack()
}).catch() 写的有点多，其实还可以扩展出好多技巧，比如模态框中传一个完整的组件，并展示出来，简单地写一下，其实只需改动一点
import Model from './Model.vue'
const modelConstructor = Vue.extend(Model)
const modelViewStyle = (obj) => {
let component = obj.component
const modelViewInstance = new modelConstructor({
data() {
return {
disabledClick: obj.stopClick // 是否禁止点击遮罩层关闭
}
}
})
let app = document.getElementById('container')
modelViewInstance.vm = modelViewInstance.$mount()
modelViewInstance.dom = modelViewInstance.vm.$el
app.appendChild(modelViewInstance.dom)
new Vue({
el: '#__model__',
mixins: [component],
data() {
return {
serveObj: obj.obj
}
}
})
}...
Vue.prototype.modelServe = {
open: (obj) => {
return new Promise(resolve => {
modelViewStyle(obj, resolve)
Vue.prototype.$receive = (data) => {
resolve(data)
close()
}
})
}
}
调用：
sendCallBack() {
this.modelServe.open({
component: AddCallback,
stopClick: true
}).then(data =>
if (data === 1) {
this.addInit()
} else {
this.goBack()
}
})这里我们用了mixins,最后最后再简单地介绍一下mixins,extend,extends的区别
**- Vue.extend使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
mixins 选项接受一个混入对象的数组。这些混入实例对象可以像正常的实例对象一样包含选项，他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。举例：如果你的混入包含一个钩子而创建组件本身也有一个，两个函数将被调用。Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。
注意(data混入组件数据优先钩子函数将混合为一个数组，混入对象的钩子将在组件自身钩子之前调用,值为对象的选项，例如 methods, components 和 directives，将被混合为同一个对象。两个对象键名冲突时，取组件对象的键值对。)
extends 允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数)，而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。这和 mixins 类似。**
概括
extend用于创建vue实例
mixins可以混入多个mixin，extends只能继承一个
