document.body.appendChild(this.$el)
}
有了挂载，就必须要有注销。对应的生命周期应该是destroyed，所以
method: {
destroyElement () {
this.$destroy()
}
},
destroyed () {
this.$el.parentNode.removeChild(this.$el)
}组件注销的时间与它在页面中显示息息相关，当<form />在页面中不可见时候，需要注销它
method: {
destroyElement () {
this.$destroy()
}
},
destroyed () {
this.$el.parentNode.removeChild(this.$el)
}一般Form组件有两个功能：
done：代表用户确认；
cancel：代表用户取消；
当done或cancel触发时，APP组件内可能会有相应的变化，所以在组件实例化之后，利用$on去监听对应的done事件以及cancel事件。
done && inlineListen({
method: 'done',
options,
instance
})
cancel && inlineListen({
method: 'cancel',
options,
instance
})其中inlineListen函数可以方便后续添加其他的event，其代码为
const inlineListen = ({
method,
options,
instance
}) => {
let listener = `on${method}`
instance[listener] = options[method] instance.$on(method, function (data) {
this[listener](data)
})
}也可以将上述方案封装成Promise形式，如下
export const transform = (component) => {
const _constructor = Vue.extend(component)
return function (options = {}) {
const {
propsData
} = options return new Promise((resolve, reject) => {
let instance = new _constructor({
propsData
}).$mount(document.createElement('div'))
instance.$on('done', data => resolve(data))
})
}
}
使用
可以将上述属于<Form/>公有的data以及method独立出来，再通过mixins引入到每个表单内，例如
export default {
data() {
return {
visible: true
}
},
watch: {
visible(newValue) {
if (!newValue) {
this.destroyElement()
}
}
},
mounted() {
document.body.appendChild(this.$el)
},
destroyed() {
this.$el.parentNode.removeChild(this.$el)
},
methods: {
destroyElement() {
this.$destroy()
},
close() {
this.visible = false
}
}
}再通过mixins混入。
<script>
import popupWin from '../mixins/popup-win'export default {
mixins: [popupWin],
data () {
