怎么使用Vue解决动态挂载(vue,编程语言)

正式开启动态挂载

让我们继续查看文档，全局APIVue.extend( options )是通过extend创建的。Vue实例可以使用$mount方法直接挂载到DOM元素上——这正是我们需要的。

<divid="mount-point"></div>
//创建构造器
varProfile=Vue.extend({
template:'<p>{{firstName}}{{lastName}}aka{{alias}}</p>',
data:function(){
return{
firstName:'Walter',
lastName:'White',
alias:'Heisenberg'
}
}
})
//创建Profile实例，并挂载到一个元素上。
newProfile().$mount('#mount-point')

按照SpreadJS自定义单元格示例创建AutoCompleteCellType，并设置到单元格中：

functionAutoComplateCellType(){
}
AutoComplateCellType.prototype=newGC.Spread.Sheets.CellTypes.Base();
AutoComplateCellType.prototype.createEditorElement=function(context,cellWrapperElement){
//cellWrapperElement.setAttribute("gcUIElement","gcEditingInput");
cellWrapperElement.style.overflow='visible'
leteditorContext=document.createElement("div")
editorContext.setAttribute("gcUIElement","gcEditingInput");
leteditor=document.createElement("div");
//自定义单元格中editorContext作为容器，需要在创建一个child用于挂载，不能直接挂载到editorContext上
editorContext.appendChild(editor);
returneditorContext;
}
AutoComplateCellType.prototype.activateEditor=function(editorContext,cellStyle,cellRect,context){
letwidth=cellRect.width>180?cellRect.width:180;
if(editorContext){
//创建构造器
varProfile=Vue.extend({
template:'<p>{{firstName}}{{lastName}}aka{{alias}}</p>',
data:function(){
return{
firstName:'Walter',
lastName:'White',
alias:'Heisenberg'
}
}
})
//创建Profile实例，并挂载到一个元素上。
newProfile().$mount(editorContext.firstChild);
}
};

运行，双击进入编辑状态，结果却发现报错了

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

根据报错提示，此时候我们有两种解决办法：

• 开启runtimeCompiler，在vue.config.js中加入runtimeCompiler: true的配置，允许运行时编译，这样可以动态生成template，满足动态组件的需求

• 提前编译模板仅动态挂载，autocomplete的组件是确定的，我们可以使用这种方法

新建AutoComplete.vue组件用于动态挂载，这样可以挂载编译好的组件。

<template>
<div>
<p>{{firstName}}{{lastName}}aka{{alias}}</p>
</div>
</template>
<script>
exportdefault{
data:function(){
return{
firstName:"Walter",
lastName:"White",
alias:"Heisenberg",
};
},
};
</script>
importAutoComplatefrom'./AutoComplate.vue'
AutoComplateCellType.prototype.activateEditor=function(editorContext,cellStyle,cellRect,context){
letwidth=cellRect.width>180?cellRect.width:180;
if(editorContext){
//创建构造器
varProfile=Vue.extend(AutoComplate);
//创建Profile实例，并挂载到一个元素上。
newProfile().$mount(editorContext.firstChild);
}
};

双击进入编辑状态，看到组件中的内容

下一步，对于自定义单元格还需要设置和获取组件中的编辑内容，这时通过给组件添加props，同时在挂载时创建的VueComponent实例上直接获取到所有props内容，对应操作即可实现数据获取设置。

更新AutoComplate.vue，添加props，增加input用于编辑

<template>
<div>
<p>{{firstName}}{{lastName}}aka{{alias}}</p>
<inputtype="text"v-model="value">
</div>
</template>
<script>
exportdefault{
props:["value"],
data:function(){
return{
firstName:"Walter",
lastName:"White",
alias:"Heisenberg",
};
},
};
</script>

通过this.vm存储VueComponent实例，在getEditorValue 和setEditorValue 方法中获取和给VUE组件设置Value。编辑结束，通过调用$destroy()方法销毁动态创建的组件。

AutoComplateCellType.prototype.activateEditor=function(editorContext,cellStyle,cellRect,context){
letwidth=cellRect.width>180?cellRect.width:180;
if(editorContext){
//创建构造器
varProfile=Vue.extend(MyInput);
//创建Profile实例，并挂载到一个元素上。
this.vm=newProfile().$mount(editorContext.firstChild);
}
};
AutoComplateCellType.prototype.getEditorValue=function(editorContext){
//设置组件默认值
if(this.vm){
returnthis.vm.value;
}
};
AutoComplateCellType.prototype.setEditorValue=function(editorContext,value){
//获取组件编辑后的值
if(editorContext){
this.vm.value=value;
}
};
AutoComplateCellType.prototype.deactivateEditor=function(editorContext,context){
//销毁组件
this.vm.$destroy();
this.vm=undefined;
};

整个流程跑通了，下来只需要在AutoComplate.vue中，将input替换成ElementUI 的el- autocomplete并实现对应方法就好了。

结果

让我们看看效果吧。

相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。