好资源导航 » 文章资讯 » 详解Vue 动态添加模板的几种方法

详解Vue 动态添加模板的几种方法

2024-02-25 00:59:05 42

以下方法只适用于Vue1.0版本，推荐系数由高到低排列。

通常我们会在组件里的template属性定义模板，或者是在*.vue文件里的template标签里写模板。但是有时候会需要动态生成模板的需求，例如让用户自定义组件模板，或者设置组件的布局。

例如要做一个类select的组件，用户传入options数据，通过valueprop获取选中值，最基本的原型如下。

Vue.component('XSelect',{
template:`

`, props:['value','options'] })

如果此时需要增加一个API支持让用户自定义option部分的模板。此处用slot并不能解决问题。

通过$options.template修改

通过打印组件对象可以获得一个信息，在$options里定义了一个template属性，写在template标签里的模板，最终编译后也会在$options.template里。通过文档的生命周期可以得知，在created的时候，实例已经结束解析选项，但是还没有开始DOM编译也就是说，如果用户通过prop的数据我们可以获得，但是模板其实还没有渲染成DOM。经过测试，在created修改this.$options.template是可以改变最终生成的DOM的，同时也能拿到props的内容。

那么我们可以修改下代码，使其支持自定义模板

Vue.component('XSelect',{
props:[
'value',
'options',
{
name:'template',
default:''
}
],

created(){
varoptionTpl=this.template

this.$options.template=`



${optionTpl}

` } })

用户使用是就可以传入模板了

可能存在的问题

我们知道Vue在内部帮我们做了许多优化，但是在这里可能会由于某些优化导致动态拼接的模板无法渲染成功。例如这里我们不使用v-for而是手工遍历options生成需要的HTML

consttpl=options.map(opt=>`${this.optionTpl}`)

this.$options.template=`


${tpl}

这里会导致一个BUG，如果一个页面有多个x-select组件，并且options长度不一样，会导致长的options的组件后面几个选项渲染不出来。究其原因是Vue会帮我们缓存模板编译结果。翻看代码可以找到vue/src/instance/internal/lifecycle.js里有做优化，同时提供的_linkerCachable本意是给内联模板使用。我们可以通过设置this.$options._linkerCachable=false达到我们的目的。

这样我们就可以开发让用户自定义布局的组件了，用户传入布局参数，通过手工拼接模板，设置了_linkerCachable=false也不会被缓存。

通过$options.partials动态添加partial

使用partials也能达到添加自定义模板的目的，但是通常的做法是要全局注册partial，这么做并不优雅。vue-strap就是这么做的。如果重名了会被覆盖（初次渲染不会，但是数据更新重新渲染DOM时就会被覆盖）。

通过文档我们知道可以在组件内部通过partials属性注册局部的partial，因此自然而然也可以在this.$options.partials去动态添加了。

Vue.component('XSelect',{
template:`

`, props:['template','value','options'], partials:{ option:'' }, created(){ if(this.template){ this.$options.partials.option=this.template } } })

用interpolate渲染模板

这种方式就略显蛋疼，而且效率最差。interpolate也是我最开始做动态渲染模板想到的方式，不推荐使用。

Vue.component('XSelect',{
template:`

`, props:[ 'value', 'options', { name:'template', default:'' } ], methods:{ renderOption(option){ this.option=option returnthis.$interpolate(this.template) } } })

目前并没有找到合适的解决方案。2.0的Vue将compile工作提前，并且compiler也是单独一个包（除非你直接引用的是vue.js文件，包含compiler和runtime，那么第一种方法是适用的），那么并不能动态的生成模板。除非用户传入的是render能识别的DOMtree。

按照这样的思路，其实可以让用户传入的模板预先编译好，传入到组件内，拼接DOMtree看起来也能解决问题。那么可以这么玩。

看看就好，性能太渣

首先要安装VueJSX的相关插件

组件

Vue.component({
name:'XSelect',

render(h){
//这里获得的this.template其实是一个函数，调用该函数返回DOM
//因此这里的关键代码是拼接一个新的函数，接受`option`参数以及上下文
//使用newFunction创建一个新函数

return(


{
this.options.map(option=>
this.$emit('input',option.value)}
class="option">
{newFunction('option','return'+this.template)(option)(h)}

)
}
)
},

props:['template','value','options']
})

入口文件

newVue({
el:'#app',

data(){
return{
value:''
}
},

created(){
//初始化需要传入的模板，这里会被Vue的JSX插件转成DOMtree
this.template=h=>标签:{option.label},值:{option.value}
},

render(h){
return(

)
}
})

综上，在Vue1.x里不存在预编译的概念，所以想动态修改模板还是有许多方式的，甚至还可以结合取到slot里的内容拼接进模板里。但2.0就麻烦了，并找不到理想的方法。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

详解Vue 动态添加模板的几种方法

热门推荐

随机推荐