動態添加模板需要收集原始數據的頁面，這個時候我們需要很多原始數據收集模板，下面給大家詳解Vue 動態添加模板的幾種方法，希望對你學習這方面知識有所幫助。

通常我們會在組件里的 template 屬性定義模板，或者是在*.vue文件里的 template 標簽里寫模板。但是有時候會需要動態生成模板的需求，例如讓用戶自定義組件模板，或者設置組件的布局。

例如要做一個類 select 的組件，用戶傳入 options 數據，通過 value prop 獲取選中值，最基本的原型如下。

Vue.component('XSelect', {

template: `

class="option"

v-for="option in options"

@click="value = option.value">

`,

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 =`

class="option"

v-for="option in options"

@click="value = option.value">

${optionTpl}

`

}

})

用戶使用是就可以傳入模板了

:value.sync="value"

template="標簽: {{ option.label }}, 值: {{ option.value }}"

:options="[

{value: 1, label: 'a'},

{value: 2, label: 'b'},

{value: 3, label: 'c'}

]">

可能存在的問題

我們知道 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: `

class="option"

v-for="option in options"

@click="value = option.value">

`,

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

partials: {

option: ''

},

created() {

if(this.template) {

this.$options.partials.option =this.template

}

}

})

用 interpolate 渲染模板

這種方式就略顯蛋疼，而且效率最差。 interpolate 也是我最開始做動態渲染模板想到的方式，不推薦使用。

Vue.component('XSelect', {

template: `

class="option"

v-for="option in options"

@click="value = option.value"

v-html="renderOption(option)">

`,

props: [

'value',

'options',

{

name: 'template',

default:''

}

],

methods: {

renderOption(option) {

this.option = option

returnthis.$interpolate(this.template)

}

}

})

Vue2.0

目前并沒有找到合適的解決方案。2.0 的 Vue 將 compile 工作提前，并且 compiler 也是單獨一個包(除非你直接引用的是 vue.js 文件，包含 compiler 和 runtime，那么第一種方法是適用的)，那么并不能動態的生成模板。除非用戶傳入的是 render 能識別的 DOM tree。

按照這樣的思路，其實可以讓用戶傳入的模板預先編譯好，傳入到組件內，拼接 DOM tree 看起來也能解決問題。那么可以這么玩。

看看就好， 性能太渣

首先要安裝 Vue JSX 的 相關插件

組件

Vue.component({

name: 'XSelect',

render(h) {

// 這里獲得的 this.template 其實是一個函數，調用該函數返回 DOM

// 因此這里的關鍵代碼是拼接一個新的函數，接受 `option` 參數以及上下文

// 使用 new Function 創建一個新函數

return(

{

this.options.map(option =>

on-click={() => this.$emit('input', option.value) }

class="option">

{ new Function('option', 'return ' + this.template)(option)(h) }

)

}

)

總結

以上是生活随笔為你收集整理的vue动态设置文字布局方式_详解Vue动态添加模板的几种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。