import Vue from 'vue'
// 实例化组件 普通版
Vue.prototype.$component2Instance = (Component, options = {}) => {
let el = options.el || document.createElement('div')
const Ctor = Vue.extend(Component)
const ctor = new Ctor({
el,
parent: options.parent || window.vm,
propsData: options.propsData || options.props || {},
})
return ctor
}
// 实例化组件 进阶版(实现传参同步响应式)
// getVNodeData: Function 返回参数对象 props,style,class,on等 (通创建组件参数)。
Vue.prototype.$component2InstanceV2 = (Component, options = {}, getVNodeData = () => ({})) => {
let parent = options.parent || window.vm
let vnode
// render函数内get数据,vue内部会将相应数据进行依赖收集————响应式
const Comp = {
abstract: true, // 抽象化,实际无DOM渲染 Component组件的$parent仍为引用父组件。
destroyed () {
this.$el && this.$el.parentNode && this.$el.parentNode.removeChild(this.$el)
},
render () {
vnode = <Component {...getVNodeData()}/>
return vnode
},
}
// 实例化Comp 以便销毁
let el = options.el || document.createElement('div')
const Ctor = Vue.extend(Comp)
let ctor = new Ctor({
el,
parent: parent,
})
vnode.componentInstance.$on('hook:destroyed', () => {
ctor.$destroy()
ctor = null
})
return vnode.componentInstance
}
普通版实例化只能通过propsData属性传参,且传入的响应式变量失去了响应性。
原因:new出一个实例时,propsData传参时先进行了getter取值(依赖收集),再将值传入实例中,此值不会进行依赖收集,失去响应性。进阶版通过render函数转化实现响应式。
调用:
const chooseFieldPanel = proxy.$component2InstanceV2(ChooseFieldPanel, { parent: proxy }, () => ({
props: {
value: checkedField.value ? [checkedField.value] : [],
allColumns: props.allColumns,
columnsData: props.columnsData,
...props.fieldTreeProps,
},
style: chooseFieldPanelStyle,//可为响应式变量,依旧保持响应式
on: {
change: handleFieldChange,
},
}))